CSS3 box-shadow プロパティの詳細な例

CSS3 - 影の追加（ボックスシャドウの使用）

CSS3 - div またはテキストに影を追加する (ボックス シャドウ、テキスト シャドウの使用)

CSS3 では、ボックス シャドウとテキスト シャドウの 2 種類のシャドウが定義されています。ボックス シャドウには IE9 以降が必要ですが、テキスト シャドウには IE10 以降が必要です。以下では、ボックスシャドウの使用について説明します。

1. ボックスシャドウ box-shadow

box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。

文法：

box-shadow: offset-x offset-y ぼかし スプレッド カラー インセット;

ox-shadow: X軸オフセット Y軸オフセット [影のぼかし半径] [影の拡張] [影の色] [投影方法];

単語の説明: ぼかし: ぼかし、広がり: 伸びる、挿入: 凹面

パラメータの説明:

• offset-x: 必須。正または負の値を指定できます。 offset-x 水平方向の影の位置。
• offset-y: 必須。正または負の値を指定できます。 offset-y 垂直方向の影の位置。
• blur: オプション。正の値のみを取ることができます。 blur-radius は影のぼかし半径です。0 はぼかし効果がないことを意味します。値が大きいほど、影のエッジがぼやけます。
• spread: オプション。正または負の値を取ることができます。スプレッドは、周囲に広がる影の円周の大きさを表します。正の値にすると影が広がり、負の値にすると影が縮みます。
• 色:オプション。影の色。設定されていない場合、ブラウザはデフォルトの色（通常は黒）を使用しますが、ブラウザごとにデフォルトの色が異なるため、省略しないことをお勧めします。透明な値を持つ rgb(250,0,0) または rgba(250,0,0,0.5) のいずれかになります。
• インセット:オプション。キーワード。外部投影 (デフォルトの開始点) を内部投影に変更します。インセット 影は背景の上、コンテンツの下にあります。

注意: inset は最初または最後のパラメータとして記述できますが、他の位置では無効です。

2. ボックスシャドウの使用

1. 水平オフセットと垂直オフセットが0の場合でも影が現れることがある

offset-x または offset-y の値が 0 の場合、影は要素の後ろにあります。この場合、blur-radius 値または spread 値を指定すると、影の効果を生み出すことができます。

例：

最初の div は、blur-radius を設定して影の効果を作成します。

2 番目の div は、正のスプレッド値を設定して影の効果を作成します。

3 番目の div は、スプレッドを負の値に設定して影の効果を作成します。

ただし、注意すべき点が 1 つあります。拡張シャドウはシャドウ ブラー半径と組み合わせて使用​​する必要があります。

個人的には、併用する事は無いと思いますが、拡張影と影ぼかしの値はどちらもプラスになる事もあるので、拡張影だけ設定する事は不可能です。拡張シャドウのみを使用した場合、ブラウザではぼやけたシャドウとして解釈されるため、単純に「拡張シャドウはシャドウぼかし半径と組み合わせて使用​​する必要があります」と理解できます。拡張シャドウのみを使用する場合は、box-shadow:0 0 0 1px; と記述できます。

<スタイル>
      div{
            幅: 100ピクセル;
            高さ: 100px;
            マージン:50px;
            境界線: 10px 赤い点線;
            表示: インラインブロック;
    }
    .ぼかし{
            ボックスシャドウ: 0 0 20px ;
            /*box-shadow: 0 0 20px green;*/ /*色もカスタマイズできます*/
    }  
    .spread-positive{
            ボックスの影: 0 0 20px 5px ;
            /* box-shadow: 0 0 20px 5px green;*/ /*色もカスタマイズできます*/
    }
    .スプレッドネガティブ{
            ボックスの影: 0 0 20px -5px ;
            /* box-shadow: 0 0 20px -5px green;*/ /*色もカスタマイズできます*/
    }
    </スタイル>
</head>
<本文>
    <div class="blur"></div>
    <div class="spread-positive"></div>
    <div class="spread-negative"></div>
</本文> 

2. 影の効果を得るために水平と垂直のオフセットを設定します

Outsetの場合：水平オフセットと垂直オフセットは0ですが、blurとspreadが設定されていないため、影は見えません。box-shadowの周囲はborder-boxと同じなので、オフセットを設定することで影を表示できます。

インセットの場合: 水平オフセットと垂直オフセットは 0 で、blur と spread は設定されておらず、box-shadow の周囲は padding-box と同じであるため、影はまだ表示されません。また、オフセットを設定することで影を表示することもできます。

例：

<スタイル タイプ="text/css">
div{
    幅: 100ピクセル;
    高さ: 100px;
    マージン:50px;
    境界線: 10px ピンクの点線;
    表示: インラインブロック;
}
.shadow0{ボックスシャドウ: 0 0;}  
.shadow1{ボックスシャドウ: 1px 1px;}
.shadow10{ボックスシャドウ: 10px 10px;}
.inset-shadow0{ボックスシャドウ: 0 0 インセット;}  
.inset-shadow1{ボックスシャドウ: 1px 1px インセット;}
.inset-shadow10{ボックスシャドウ: 10px 10px インセット;}
</スタイル>
<本文>
    <div class="shadow0"></div>
    <div class="shadow1"></div>
    <div class="shadow10"></div>
    <div class="inset-shadow0"></div>
    <div class="inset-shadow1"></div>
    <div class="inset-shadow10"></div>
</本文> 

3. 投影法

デフォルトの投影モードは、外部投影を意味する outset です。内側に投影するには、inset を設定します。

例: 最初の div にはデフォルトのアウトセットがあり、2 番目にはインセットがあり、3 番目にはアウトセットとインセットの関係をよりよく示すために両方のシャドウが設定され、4 番目の div には背景の上とコンテンツの下にインセット シャドウがあります。

<スタイル タイプ="text/css">
div{
    幅: 100ピクセル;
    高さ: 100px;
    マージン:50px;
    境界線: 10px ピンクの点線;
    表示: インラインブロック;
    垂直方向の位置合わせ: 上;
} 
。最初{
    ボックスシャドウ: 10px 10px ティール;
}
.インセット{
    box-shadow: 10px 10px ティール インセット;    
}
。ダブル{
    ボックスシャドウ: 10px 10px ティール インセット、10px 10px ティール;
}
.bg{
    背景色: 黄色;
}
</スタイル>
<本文>
    <div class="outset"></div>
    <div class="inset"></div>
    <div class="double"></div>
    <div class="inset bg">背景の上、コンテンツの下に影を挿入します</div>
</本文> 

4. 要素に border-radius プロパティも指定されている場合、影の角も同様に丸くなります。

<スタイル タイプ="text/css">
 div{
 幅: 100ピクセル;
    高さ: 100px;
    マージン:50px;
    境界線: 10px ピンクの点線;
    表示: インラインブロック;
    境界線の半径: 50px;
 }
。影{
    ボックスの影: 0 0 10px 10px 緑;
}
</スタイル>
<本文>
<div class="shadow"></div>
</本文> 

5. 典型的な例

w3c からの例。 http://www.w3.org/TR/css3-background/#ボックスシャドウ

見える：

• border-radiusは影の形に同じように影響します
• border-image、paddingは影の形状には影響しません
• シャドーボックスはボックスモデルと同じ
• 外側の影はオブジェクトの背景の下にあり、内側の影は背景の上にあります。
• 階層: コンテンツ > 内側の影 > 背景画像 > 背景色 > 外側の影

6. 複数の影

この効果は上で確認しましたが、ここでさらにコンテンツを追加します。

構文: カンマで区切って任意の数の影を設定できます。

ボックスに複数の影がある場合、順序に注意する必要があります。複数の影は上から下に分散され、最初の影が上になります。

例: 片側シャドウ効果

まず説明させてください。左枠の影、右枠の影、上枠の影、下枠の影を別々に設定できます。実は、この効果はこのように見えるので、こう言うのは正しいのですが、根本的な理由は、影がボックスの後ろにあり、影の位置が変わるだけで、他の3辺の影は依然として存在し、覆われているだけです。したがって、特定の辺の影を設定することは非常に曖昧なことです。悲しいことに、インターネット上のこの説明は、最初は私を混乱させました。そのため、ここでは片側の影の効果だと言いましたが、これは単なる効果であり、本質的には依然としてボックスであることをお伝えするためです。

例の説明: 最初の div の上、右、下、左の境界線をそれぞれ赤、オレンジ、黄色、緑の色に設定すると、下の左の図に示すように、赤い影が上のレイヤーに、緑の影が下のレイヤーに表示されます。

ぼかし半径を追加すると、効果がより顕著になります。下の図に示すように、赤い影のぼかし半径は最上位レイヤーにあるため影響を受けません。次にオレンジの影があり、赤い影の半径の影響を受けます。黄色の影はオレンジの影と赤い影の半径の影響を受けます。同様に、緑の影は、その上にあるすべての影の半径の影響を受けます。

それでもまだ理解できない場合は、赤い影の半径を 50 などの大きな値に設定すると、下の右の図に示すように、非常に明らかな効果を確認できます。

<スタイル タイプ="text/css">
div{
    幅: 100ピクセル;
    高さ: 100px;
    マージン:50px;
    表示: インラインブロック;
    境界線: 10px ピンクの点線;
}
。影{
    ボックスシャドウ: 0 -5px 赤、
    5px 0 オレンジ、
    0 5px 黄色、
    -5px 0 緑;
}
.ぼかし-影{
    ボックスシャドウ: 0 -5px 5px 赤、
    5px 0 5px オレンジ、
    0 5px 5px 黄色、
    -5px 0 5px 緑;
}
.big-redShadow{
    ボックスシャドウ: 0 -5px 50px 赤、
    5px 0 5px オレンジ、
    0 5px 5px 黄色、
    -5px 0 5px 緑;
}
</スタイル>
<本文>
    <div class="shadow"></div>
    <div class="blur-shadow"></div>
    <div class="big-redShadow"></div>
</本文> 

7. 影とレイアウト

影はレイアウトには影響しませんが、他のボックスや他のボックスの影を覆ってしまう可能性があります。

影によってスクロールバーがトリガーされることはなく、スクロール領域のサイズも拡大されません。

したがって、レイアウト中に影を無視できます。

8. スプレッドを使用する

スプレッドを使用して境界をシミュレートする

<スタイル タイプ="text/css">
div{
    幅: 100ピクセル;
    高さ: 100px;
    表示: インラインブロック;
    マージン:10px;
    垂直方向の位置合わせ: 上;
}
。国境{
    border:1px 赤一色;
}
。広める{
    ボックスの影: 0 0 0 1px 赤;
}
.muli-border{
    ボックスの影: 0 0 0 2px 赤、0 0 0 4px 緑、0 0 0 6px 青;
}
</スタイル>
<本文>
    <div class="border">境界線</div>
    <div class="spread">ボックスシャドウ</div>
    <div class="muli-border">複数<br/>box-shadow</div> 

スプレッドを使用して2色の角括弧を実装する

<スタイル タイプ="text/css">
.デコレータ{
幅: 300ピクセル;
高さ: 100px;
パディング: 30px;
ボックスの影: -30px -30px 0 -25px 赤、30px 30px 0 -25px 緑; 
}
</スタイル>
<本文>
<div class="decorator">段落コンテンツ: 2 色の角括弧をシミュレートするには、box-shadow を使用します。box-shadow: -24px -24px 0 -20px red,24px 24px 0 -20px green; </div>
</本文> 

要約する

CSS3 box-shadow プロパティの詳細な説明はこれで終わりです。CSS3 box-shadow プロパティに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。