CSSで境界線の影を設定する方法

box-shadow 属性を CSS で使用して境界線の影を設定できます。この属性は境界線に 1 つ以上の影を追加し、ピクセルの長さ、幅、ぼかし距離、影の色を設定できます。構文「box-shadow:h-shadow v-shadow ブラー スプレッド カラー インセット」。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、box-shadow プロパティを通じて境界線の影を設定し、テキスト ボックスに影を適用できます。このプロパティは、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定します。

box-shadow プロパティは、ボックスに 1 つ以上の影を追加できます。このプロパティは、シャドウのコンマ区切りのリストで、それぞれ 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

構文:

box-shadow: h-shadow v-shadow blur spread color inset;

属性値:

• h-shadow: シャドウの水平オフセットを指し、その値は正または負、正のいずれかになります。値、影はオブジェクトの右側にあります。負の値、影はオブジェクトの左側にあります。

• v-shadow: 影の垂直オフセットを参照します。 、その値は正または負の場合もあります。正の値の場合、影はオブジェクトの下部にあり、負の値の場合、影はオブジェクトの上部にあります。

• blur: 影のぼかし半径; このパラメータはオプションであり、その値が 0 の場合は、影にぼかし効果がないことを意味します。値が大きいほど、影のエッジがぼかされます。

• spread: シャドウ拡張半径; このパラメータはオプションであり、その値は正の負の値、正の値の場合、シャドウ全体が拡張され、それ以外の場合は縮小されます。

#color: 影の色; このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を選択しますが、各ブラウザ、特に Webkit の safari および chrome ブラウザのデフォルトの色は異なります。カーネルは無色、つまり透明になります。このパラメータは省略しないことをお勧めします。
inset : 内側のシャドウを設定して、外側のシャドウ (最初) から影を変更します。オプションの値は省略できます。
注: **影の複数のレイヤー。最も内側のレイヤーの優先順位が最も高く、その後、順番に優先順位が低くなります。

box-shadow の実践的な応用

例 1

X 軸を設定しないと Y 軸の値を 15 ピクセルに設定すると、それ自体の半径範囲内で効果が得られます。 color

box-shadow: 0 0 15px #f00;

例 2

X を設定します。 -軸と Y 軸を正の値に設定します (X 軸の正の値は右、Y 軸は下になります)

box-shadow:4px 4px 15px #f00;

例 3

box -shadow: inset はbox-shadowの内部シャドウで上記の書き方と同じですが、inset

box-shadow:0 0 15px #f00 inset;

が追加されている点が異なります。

正方形の 4 つの辺の色を異なるように設定しますが、影のぼかし半径は 10px

box-shadow:-10px 0px 10px red,   /*左边阴影*/

            0px -10px 10px black,  /*上边阴影*/

            10px 0px 10px green,  /*右边阴影*/

            0px 10px 10px blue;" /*下边阴影*/ >

（学習ビデオ共有:

css ビデオ チュートリアル

）

以上がCSSで境界線の影を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。