CSS3シャドウボックス・シャドウの使い方とテクニックまとめ_html/css_WEB-ITnose

この記事は http://blog.csdn.net/freshlover/article/details/7610269 から抜粋したものです

text-shadow はテキストに影の効果を追加するもので、box-シャドウは要素ブロックのシャドウ効果に周囲を追加することです。 html5 と CSS3 の普及により、この特殊効果の使用はますます一般的になってきています。

基本構文は {box-shadow:[inset] x-offset y-offset Blur-radius Spread-radiuscolor}

オブジェクトセレクター {box-shadow:[projection Method] X 軸オフセット Y 軸オフセット Shift Shadow Blur Ra​​dius Shadow Expand Radius Shadow Color}

box-shadow 属性のパラメータ設定値:

Shadow type: このパラメータはオプションです。値が設定されていない場合、デフォルトの投影方法は外側のシャドウです。一意の値「inset」が使用されている場合、投影は内側のシャドウです。

X-offset: シャドウの水平オフセット。その値は正または負です。値が正の場合、影はオブジェクトの右側にあります。値が負の場合、影はオブジェクトの左側にあります。

Y オフセット: 影の垂直オフセット。ポジティブでもネガティブでも。正の値の場合、影はオブジェクトの下部にあります。値が負の場合、影はオブジェクトの上部にあります。

シャドウのぼかし半径: このパラメータはオプションですが、その値は次のとおりです。値が 0 の場合、影にぼかし効果がないことを意味します。

影の拡張半径: このパラメータはオプションであり、値は正または正の値になります。値が正の場合は影全体が拡張され、それ以外の場合は影の色: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は一貫性がありません。特に、Webkit カーネルの Safari および Chrome ブラウザでは透明色が、Firefox/Opera では黒色になります (検証済みであるため)、このパラメータを省略しないことをお勧めします。

ブラウザの互換性:

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

[css]

プレーンコピーを表示

.box-shadow{

3. -moz-box-shadow: 投影法 X 軸オフセット量 Y 軸オフセット シャドウブラー半径シャドウ拡張半径シャドウカラー
5. //Safari および Google chrome10.0-
7. シャドウ拡張半径カラー; Y 軸オフセット量 シャドウブラー半径 シャドウ拡張半径 シャドウカラー
9. }
12. 注: 便宜上、以下の CSS 属性の一部の場所では、box-shadow 属性のみが記述され、webkit- prefix の形式では -moz- と - は記述されません。 , 使用するときは忘れずに追加してください。
14. box-shadow の特性をより明確に理解するために、いくつかの小さなテストを実行して効果を確認してください:
15. 関連コード:

[html]

view plain copy

1.   
2.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.   
13.     
      
14.     
      
15.         
      
16.     

  

    

  

    

  

    

  

    

  

    

  

    

  

    

  

    

j').boxShadow (-10,-10,5,"#0cc") //obj 要素は box-shadow を使用します。

;

Safari および Chrome ブラウザでは透明に表示されます。 、Firefox/Opera では黒く表示されます。

2) 内側と外側の div ブロックの比較から、box-shadow をサポートするすべての主流ブラウザは次のように動作します。内側のシャドウは外側のコンテナを壊し、全体のシャドウ効果を示します。 W3C 標準は、ボックス シャドウの原理とパフォーマンスを図で説明しています。

この図から、丸みを帯びた境界線の半径、シャドウの拡張半径、シャドウのブラーの半径、パディングがオブジェクトのシャドウに影響を与えます。 border-radius のゼロ値は同様に影の形状に影響しますが、border-image はオブジェクトの影の形状には影響しません。オブジェクトの影はボックス モデルと同じレベルを持ち、外側の影は影になります。は背景の下にあり、内側の影は境界線の下で背景の上にあります。デフォルトでは、背景画像が背景色の上にあることがわかっています。したがって、全体の階層は、境界線 > 内側の影 > 背景画像 > 背景色 > 外側の影になります。

3) box-shadow-2 から box-shadow-5 の効果から、box-shadow 値の役割を理解できます。

box-shadow-2 には xy のオフセットがなく、影のサイズは 10px、拡張半径はありません。カラー #0CC は rgba(0, 204,204, 1) です。ここではカラーの HEX 値を使用します。 box-shadow-3 は box-shadow-2 の効果に基づいており、rgba カラー値を適用する利点は、box-shadow シャドウにアルファ透明効果を追加することです。効果:

box-shadow-4 は、box-shadow-2 エフェクトに基づいて 15 ピクセルのシャドウ拡張半径を追加します。

box-shadow-5 は box-shadow-2 の効果に基づいており、外側のシャドウを内側のシャドウに設定します。

4)。box-shadow-6 要素は複数のシャドウを使用し、複数のシャドウはカンマで区切られます。オブジェクトの 4 つの側面に影の効果を設定するには、x オフセットと y オフセットの正と負の値を変更することで実現します。x オフセットが負の値の場合、左側の影が生成されます。正の値の場合、右の影が生成されます。 正の値では下の影が生成され、負の値では上の影が生成されます。そして、ぼかし半径を 0 に設定します。0 に設定しないと、他の 3 つの側面にも影が付きます。これは注意が必要です！

f9bbf7bbda9d19611af959d60718af92

そして、ここにはマルチシャドウの順序の問題も関係しています。同じ要素に複数のシャドウ属性を使用する場合は、その順序に注意する必要があります。たとえば、box-shadow-7 は異なるブラー値に設定されます。シャドウ- 7{

using use using through using through out through out through out through out through through through through over through over over‐‐'‐‐‐‐‐ 次のレベルに続く:

2 つの影の効果を調整し、次のように変更します:

.box-shadow-8{

使用する 使用する 使用する 使用する ‐ ‐ ‐ ‐ オフ‐‐ アウト‐、

20px 赤、

5px 黒; レイヤーが一番上にあり、ぼかし半径が大きく、その後ろの黒い影を完全にブロックします。

結論は次のとおりです。前方の影のブラー値が後方の影のブラー値より小さい場合、前方の影は後方のブラー値よりも上に表示されます。シャドウが後ろのシャドウのブラー値よりも大きい場合、前のシャドウのブラー値が後ろのシャドウのブラー値よりも大きくなります。シャドウは、背後のシャドウ エフェクトをカバーします。

4) ボーダー風のボーダー効果（影の拡張半径と影の色を設定するだけ）

.box-shadow-9 は boder:1px ソリッドレッドに似た効果を提供しますが、box-shadow とボーダー効果の効果は次のとおりです。オブジェクトの高さには違いがあり、境界の高さよりも拡張半径が 1 つだけ大きくなります。また、影はページのレイアウトに影響を与えません。これは、firebug でレイアウト図を表示することで確認できます。

( color='color value', Direction=影の角度 (数値), Strength=影の半径 (数値));

注

: このフィルターは背景属性と一緒に使用する必要があります。そうでない場合、フィルターは無効になります。 。

IE で CSS3 のボックス シャドウ (シャドウ) コードをシミュレートします:

[css] プレーン コピーを表示します

.box-shadow{

filter: progid :DXImageTransform.Microsoft.シャドウ(color='#969696', Direction=135, Strength=5);/*ie6,7,8 の場合*/

背景色: #ccc; -moz-box-shadow:2px 2px 5px #969696 ;/*firefox*/

-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/

box-shadow:2px 2px 5px #969696;/*opera または ie9*/

}

2. 子供の日のトピックでは、次のように処理しました:
[css]
5. プレーンコピーを表示

li.blk-item{

幅:423ピクセル; : 高さ: 229ピクセル;

フロート: 左;

パディング: 8 ピクセル

;

注文範囲: 2px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#d3c998', Direction=135,Strength=5);/*for ie6,7,8*/ background-color: -moz -box-shadow :2px 2px 5px#d3c998;/*firefox*/
-webkit-box-shadow: 2px 2px 5px #d3c998; /*webkit*/
7. c998;/* opera または ie9*/
9. }
方法 2: 一部の js および .htc ハック ファイルは、IE でシャドウ効果を実現できます。
15. ie-css3.htc は、IE ブラウザーが box-shadow だけでなく、いくつかの CSS3 属性をサポートできるようにするだけでなく、IE ブラウザーが角丸属性の border-radius およびテキスト シャドウ テキスト属性をサポートできるようにする htc ファイルです。 -影。
16. 使用方法は次のとおりです: ダウンロードしてサーバー ディレクトリに置きます

に次のコードを記述します:

このスクリプトの欠点は、IE がその一部しかサポートしていないことです。ボックスシャドウの値。注:

この htc ファイルを使用した後、CSS に box-shadow、-moz-box-shadow、または -webkit-box-shadow が記述されている限り、IE はそれをレンダリングします。

この htc ファイルを使用する場合、box-shadow: 0 0 10px red; と書くことはできません。そうでないと、IE では失敗します。 RGBA値のアルファ透明度はサポートされていません。

はめ込みインナーシャドウには対応していません。

シャドウ拡張はサポートされていません。

他の色を設定しても、IE では影は黒でのみ表示されます。

方法 3: jQuery プラグイン jquery.boxshadow.js を使用します。

プラグインのダウンロード アドレスは http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js です。

使用方法は非常に簡単です シンプルで、このファイルとjqueryバージョンのライブラリをheadタグに導入し、次のjsエフェクトコードを挿入します:

[javascript]

view plain copy

注: js では、次のように指定できます。 obj.style.webkitBoxShadow=value (string); obj.style.boxShadow=value (string);
5. 補足的な知識：[＆lt;＆gt; 0

値:

< ;length>:

長さの値を使用して、オブジェクトの左上隅の半径の長さを設定します。負の値は許可されません

:

オブジェクトの左上隅の半径の長さを設定するには、パーセンテージを使用します。負の値は許可されません

説明: オブジェクトの左上隅の丸い境界線を設定または取得します。 2 つのパラメータをスペースで区切って指定します。各パラメータには 1 つのパラメータ値を設定できます。最初のパラメータは水平半径を表し、2 番目のパラメータが省略された場合は、最初のパラメータがデフォルトになります。 。 たとえば、 border-top-left-radius:5px10px; と設定すると、左上隅の水平方向の隅の半径が 5 ピクセル、垂直方向の隅の半径が 10 ピクセルになることを意味します。対応するスクリプト機能は borderTopLeftRadius です。

CSS3 シャドウ デモンストレーション ツールhttp://www.css88.com/tool/css3Preview/Box-Shadow.html