css3 box-shadow_html/css_WEB-ITnose の値

css3のbox-shadowは要素ブロックに周囲の影効果を追加するものです。

1. 構文

box-shadow:inset x-offset y-offset Blur-radius Spread-Radius color

オブジェクトセレクター {box-shadow :ProjectイオンモードX -軸オフセット Y軸オフセット シャドウブラー半径 シャドウ拡張半径 シャドウカラー}




2. box-shadow値の説明

box-shadow属性は最大6つありますパラメータ設定であり、それぞれ次の値を受け取ります。

1. シャドウ タイプ

値が設定されていない場合、デフォルトの投影方法はアウター シャドウです。唯一の値「inset」は、外側のシャドウを内側のシャドウに変更します。つまり、シャドウ タイプが「inset」に設定されている場合、その投影は内側のシャドウになります。

はい 影の水平オフセットを指します。値が正の場合、影はオブジェクトの右側にあります。それ以外の場合、影は負の値です。オブジェクトの左側にあります。

3. Y-offset
は、正の値の場合は、正または負の値になります。それ以外の場合、その値が負の場合、影はオブジェクトの上部にあります。

このパラメータはオプションです。値が 0 の場合は、影にブラー効果がないことを意味します。値が大きいほど、影の拡張半径がぼやけます。このパラメータはオプションであり、値が正の場合は影全体が拡大され、値が負の場合は影の色が縮小されます。

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

備考

主要なブラウザと互換性を持たせ、これらの主流ブラウザの下位バージョンをサポートするには、Chrome や Safari などの Webkit ベースのブラウザで box-shadow 属性を使用する場合、名前を変更する必要があります属性の -webkit-box-shadow の形式で記述されます。 Firefox ブラウザは、-moz-box-shadow の形式で記述する必要があります。