css3-text shadow(text-shadow)およびbox shadow(box-shadow)

本当に見栄えの良い効果はすべて、あなた自身の制御下でゆっくりと調整されます。以下に、特定のコンテンツと使用方法を紹介します。

CSS3プロパティ

テキストの影のプロパティ

  • テキストシャドウ:xyシャドウ距離色

  • 注:水平および垂直の影の位置では負の値を使用できます。複数の影の設定を行うことができます(カンマ区切りモード)。

ボックスシャドウ

  ボックスシャドウボックスシャドウ

  hシャドウが必要です。水平シャドウの位置。
  必要なvシャドウに負の値を許可します垂直シャドウの位置。負の値を
  オプションにすることができます。ぼかし距離の
  広がりはオプションです。影のサイズは
  オプションです。影の色。
  インセットはオプションです。影の内側の影を外側の影(最初)から変更し
  ます。ボックスシャドウ:10px 10px 5px 10px#888888 inset;

短い形式:

  box-shadow:10px 10px 5px 10px#888888インセット;

ケース図は次のとおりです。

 

具体的な実装コードは次のとおりです。

<!DOCTYPE html>
<html lang = "en">
<ヘッド>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device-width、initial-scale = 1.0">
    <スタイル>
        * {
            マージン:0;
            パディング:0;
        }
        。ボックス{
            幅:500px;
            マージン:40px自動;
            text-align:中央;
        }
        .box p {
            font-size:40px;
            色:#e6c9c9;
            テキストの影:-4px 0px 1px#000;
        }
        。影{
            background-color:#eee;
            幅:200px;
            高さ:200px;
            マージン:20px自動;
            box-shadow:0px 0px 10px#bd9c9c;
        }
    </ style>
</ head>
<ボディ>
    <div class = "box">
        <p>テキストの影のプロパティ</ p>
        <div class = "shadow">

        </ div>
    </ div>
</ body>
</ html>
 
あなたが自分に役立つと感じた場合は、それに注意を払ってください、そしてあなたはいつもあなたの知識を共有します。

おすすめ

転載: www.cnblogs.com/piaoyi1997/p/12742168.html