インナーシャドウ box-shadow: inset を含む、CSS3 の box-shadow 属性の使用方法を共有する

CSS には多くの属性があります。一部の属性、特に複数の値を設定する必要がある属性は、長期間使用しないと忘れやすくなります。例: box-shadow CSS3 で box-shadow を使用するたびに、対応する効果を実現するための情報を調べなければなりません。ここで、box の使用方法をまとめましょう。 -shadowとbox-shadowの使い方 インナーシャドウを使うと後で見やすくなります。

関連する推奨事項:

1. オンラインデモ: 「box-shadow」

2. ビデオチュートリアル: 「box-shadow」

1.シャドウ: none | inset (オプションの値、設定なし、外側投影の場合、設定、内側投影の場合) x-offset (影の水平オフセット、正の方向が右) y-offset (影の垂直オフセット、正の方向は下) ) Blur-radius (影のぼかし半径、正、0 はぼかし効果がないことを意味します。値が大きいほどぼやけます) Spread-Radius (影の拡大半径、正または負の値を指定できます) color (オブジェクトの影の色を設定します) 属性値の説明:

1. シャドウ タイプ: このパラメーターはオプションです。一意の値「inset」を使用すると、外側のシャドウが内側のシャドウになります

2。 -offset: 影の水平オフセットを指します。その値は正または負の値で、正の値の場合、影はオブジェクトの右側にあり、負の値の場合、影はオブジェクトの左側にあります

3。 Y オフセット: 影の垂直オフセットを指します。値は正または負の値にすることもできます。正の値の場合、影はオブジェクトの下部にあります。負の値の場合、影はオブジェクトの上部にあります。 4. 影のぼかし半径: このパラメータはオプションで、値が 0 の場合にのみ正の値を指定できます。値が大きいほど、影のエッジがぼやけます。影の拡張半径: このパラメータは、正または負の値にすることができます。正の場合は、逆に、影全体が拡張されます。

6. 影の色: カラーがない場合、このパラメータはオプションです。が設定されている場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は異なります。特に Webkit カーネル下の Safari および Chrome ブラウザでは色、つまり透明度が設定されないため、このパラメータを省略しないことをお勧めします。

注:
複数の影のレイヤーの場合、最も内側のレイヤーの優先順位が最も高く、その後、順番に優先順位が低くなります。カンマ「,」を使用して区切ります。



2. box-shadow の実践的な応用

例 1: X 軸と Y 軸を設定せず、値シャドウブラー半径を 15px に設定します。独自の半径範囲と色の範囲内で機能します。 。

box-shadow: 0 0 15px #f00;

レンダリング:

例 2: X 軸と Y 軸を正の値に設定します (正の値、-shadow: inset は box-shadow の内側のシャドウです。唯一の違いは、インセットが追加されます

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

Rendering:

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

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

Renderings:

上記は、 CSS3 での box-shadow の使い方、box-shadow の使い方: 内部シャドウの挿入、および box-shadow の実践的な応用。ボックスシャドウの周囲にどのような効果を設定するかについては、特定の要件によって異なります。

以上がインナーシャドウ box-shadow: inset を含む、CSS3 の box-shadow 属性の使用方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。