text-shadowはテキストに影効果を追加するもので、box-shadowは要素ブロックに周囲の影効果を追加するものです。 HTML5 と CSS3 の人気により、この特殊効果の使用はますます一般的になってきています。
基本的な構文は、{box-shadow:[inset] x-offset y-offset Blur-radius Spread-radiuscolor}
オブジェクトセレクター {box-shadow:[投影法] ] シャドウ タイプ: このパラメータはオプションです。値が設定されていない場合、デフォルトの投影方法は外側のシャドウです。一意の値「inset」が使用される場合、投影は内側のシャドウです。X-offset: シャドウの水平オフセット。その値は正または負です。値が正の場合、影はオブジェクトの右側にあります。値が負の場合、影はオブジェクトの左側にあります。 Y-offset: 影の垂直オフセットとその値。ポジティブにもネガティブにもなり得ます。正の値の場合、影はオブジェクトの下部にあります。その値が負の場合、影はオブジェクトの上部にあります。 シャドウのぼかし半径: このパラメーターはオプションですが、その値は次のとおりです。値が 0 の場合、影にぼかし効果がないことを意味します。 影の拡張半径: このパラメータはオプションであり、値は正または正の値になります。値が正の場合は影全体が拡張され、それ以外の場合は影の色: このパラメータはオプションです。色を設定しない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は一貫性がありません。特に、Webkit カーネルの Safari および Chrome ブラウザの透明色と、Firefox/Opera の黒色 (検証されているため）、このパラメータは省略しないことをお勧めします。 ブラウザの互換性:
さまざまな主流ブラウザと互換性を持ち、これらの主流ブラウザの下位バージョンをサポートするには、 Webkit ベースの Chrome や Safari などのブラウザで box-shadow 属性を使用する場合、Write が必要です-webkit-box-shadow 形式のプロパティの名前。 Firefox ブラウザは、-moz-box-shadow の形式で記述する必要があります。
.box-shadow{
//Firefox4.0-
-moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Safariand Google chrome10.0-
-webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
}テスト
を実行し、その効果を確認してください: 関連コード:<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS3属性：box-shadow测试</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.boxshadow.js"></script>
<style type="text/css">
.box-shadow-1{
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
.box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
.box-shadow-3{
-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
box-shadow:0 0 10px rgba(0, 204, 204, .5);
}
.box-shadow-4{
-webkit-box-shadow:0 0 10px 15px #0CC;
-moz-box-shadow:0 0 10px 15px #0CC;
box-shadow:0 0 10px 15px #0CC;
}
.box-shadow-5{
-webkit-box-shadow:inset 0 0 10px #0CC;
-moz-box-shadow:inset 0 0 10px #0CC;
box-shadow:inset 0 0 10px #0CC;
}
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}
.box-shadow-7{
box-shadow:0 0 10px 5px black,
0 0 10px 20px red;
}
.box-shadow-8{
box-shadow:0 0 10px 20px red,
0 0 10px 5px black;
}
.box-shadow-9{
box-shadow: 0 0 0 1px red;
}
.obj{
width:100px;
height:100px;
margin:50px auto;
background:#eee;
}
.outer{
width: 100px;
height: 100px;
border: 1px solid red;
}
.inner{
width: 60px;
height: 60px;
background-color: red;
-webkit-box-shadow: 50px 50px blue;
-moz-box-shadow: 50px 50px blue;
box-shadow: 50px 50px blue;
}
</style>
</head>
<body>
<p class="obj box-shadow-1"></p>
<p class="outer">
<p class="inner"></p>
</p>
<p class="obj box-shadow-2" ></p>
<p class="obj box-shadow-3" ></p>
<p class="obj box-shadow-4" ></p>
<p class="obj box-shadow-5" ></p>
<p class="obj box-shadow-6" ></p>
<p class="obj box-shadow-7" ></p>
<p class="obj box-shadow-8" ></p>
<p class="obj box-shadow-9" ></p>
<script type="text/javascript">
$(document).ready(function(){
if($.browser.msie) {
$('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow
}
});
</script>
</body>
</html>
2) 内側と外側の p ブロックの比較から、box-shadow をサポートするすべての主流ブラウザは次のように動作します。内側のシャドウは外側のコンテナを壊し、全体のシャドウ効果を示します。 W3C 標準は、ボックス シャドウの原理とパフォーマンスを図で説明しています:
この図から理解できるのは、丸みを帯びたボーダー半径、シャドウ拡張半径、シャドウブラー半径、およびパディングです。 オブジェクトのシャドウに影響を与える方法: border-radius のゼロ以外の値は同様に影の形状に影響しますが、border-image はオブジェクトの影の形状に影響を与えず、オブジェクトの影はボックス モデルと同じレベルになります。オブジェクトが背景の下にある場合、外側の影は境界線の下で背景の上にあります。デフォルトでは、背景画像が背景色の上にあることがわかっています。したがって、全体の階層は、境界線 > 内側の影 > 背景画像 > 背景色 > 外側の影になります。
3) .box-shadow-2 から .box-shadow-5 の効果から、box-shadow 値の役割を理解できます。
。box-shadow-2 には xy のオフセットがありません。影のサイズは 10 ピクセル、拡張半径はありません。色 #0CC は rgba(0, 204,204, 1)、ここではカラー HEX 値を使用します。
と box-shadow-3 は box-shadow-2 エフェクトに基づいており、rgba カラー値を適用します。利点はアルファ透明度が追加されることです。ボックスシャドウに。効果:
box-shadow-4 は、box-shadow-2 エフェクトに基づいて 15 ピクセルのシャドウ拡張半径を追加します。
box-shadow-5 は box-shadow-2 の効果に基づいており、外側のシャドウを内側のシャドウに設定します。
4) box-shadow-6 要素は複数のシャドウを使用し、複数のシャドウはカンマで区切られます。オブジェクトの 4 つの側面に影の効果を設定するには、x オフセットと y オフセットの正と負の値を変更することで実現します。x オフセットが負の値の場合、左側の影が生成されます。正の値の場合、右の影が生成されます。 正の値では下の影が生成され、負の値では上の影が生成されます。そして、ぼかし半径を 0 に設定します。0 に設定しないと、他の 3 つの側面にも影が付きます。これは注意が必要です！
この書き方は間違っていることに注意してください: {box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
そして、ここにはマルチシャドウの順序の問題も関係しています。同じ要素に複数のシャドウ属性を使用する場合は、その順序に注意する必要があります。たとえば、box-shadow-7 は異なるブラー値に設定されます。シャドウ-7{
box-shadow:0 0 10px 5px 黒、
0 0 10px 20px red;
}
レイヤー化シーケンス効果が表示されます:
2 つのシャドウ効果を調整する場合は、次のように変更します:
.box-shadow-8{
box-shadow:0 0 10px 20px 赤、
0 0 10px 5px black;
}
は、赤い影のレイヤーが一番上にあり、ぼかし半径が大きく、背後の黒い影を完全にブロックしているため、赤い影の効果のみが表示されます。
結論は、前の影のブラー値が後ろの影のブラー値より小さい場合、前の影のブラー値が後ろよりも上に表示されます。が後ろの影のぼかし値より大きい場合、前の影が後ろの影の効果を覆い隠します。
4) ボーダー風のボーダー効果(影の拡大半径と影の色のみ設定)
.box-shadow-9 によってもたらされる効果は、border:1px の赤一色に似ていますが、box-shadow の効果は、オブジェクトの高さが境界効果とは異なります。つまり、境界の高さよりも拡張半径がちょうど 1 つ大きいだけです。また、影はページのレイアウトに影響を与えません。これは、firebug でレイアウト図を表示することで確認できます。
5) ieの下のieのbox-shadowシャドウ効果
をシミュレートします。 フィルター基本構文: filter:progid:DXImageTransform.Microsoft.Shadow(color='カラー値', Direction=影の角度(数値), Strength=影の半径(数値));
注: このフィルターは必ず使用してください。背景属性と一緒に使用しない場合、フィルターは無効になります。
IE で css3 のボックス シャドウ (シャドウ) コードをシミュレートします:
.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength = 5);/*ie6,7,8 の場合*/
-webkit-box -shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera or ie9*/ }こどもの日の特別トピックでは、次のように処理しました:
[css]
li.blk-item{
width
:423px
:229px; : 左;
:8px;
マージン:2px 18px 13px 21px;
border:1px ソリッド #d3c99 8; border-radius:2px; :progid:DXImageTransform.Microsoft.Shadow(color='#d3c998', Direction=135,Strength=5);/*ie6,7,8 の場合*/
背景色: #fff;
- moz -box-shadow:2px 2px 5px#d3c998;/*firefox*/-webkit-box-shadow:2px 2px 5px#d3c998;/*webkit*/
box-shadow:2px 2px 5px #d3c998;/ * opera または ie9*/}
方法 2: 一部の
js および .htc ファイルは、IE で シャドウを実装できます効果。
ie-css3.htc は、IE ブラウザーが box-shadow だけでなく、いくつかの CSS3 属性をサポートできるようにする htc ファイルです。また、IE ブラウザーが角丸属性の border-radius およびテキスト シャドウ テキスト属性もサポートできるようにします。 -影。
次のコードを
に記述します: このスクリプトの欠点は、IE がその一部しかサポートしていないことです。ボックスシャドウの値。注: この htc ファイルを使用した後、CSS に box-shadow、-moz-box-shadow、または -webkit-box-shadow が記述されている限り、IE はそれをレンダリングします。 この htc ファイルを使用する場合、次のように box-shadow を記述することはできません: 0 0 10px red;
代わりに、box-shadow: 0px 0px 10px red にする必要があります。それ以外の場合は、IE で失敗します。 は、RGBA 値のアルファ透明度をサポートしていません。
jQuery
jquery.boxshadow.js
if($.browser.msie) {
});
注: js で使用できます: obj.style.webkitBoxShadow=value (string);obj。 style.MozBoxShadow=値 (文字列);obj.style.boxShadow = 値 (文字列)補足:
CSS3
プロパティ border-top-left-radius:長さ> [] <パーセント> ]?
デフォルト値: 0値:
<長さ>: 長さの値を使用して、オブジェクトの左上隅の半径の長さを設定します。負の値は許可されません： オブジェクトの左上隅の半径の長さをパーセンテージで設定します。負の値は許可されません 説明: オブジェクトの左上隅の丸い境界線を設定または取得します。 2 つのパラメータをスペースで区切って指定します。各パラメータには 1 つのパラメータ値を設定できます。最初のパラメータは水平半径を表し、2 番目のパラメータが省略された場合は、最初のパラメータがデフォルトになります。 。 たとえば、 border-top-left-radius:5px10px; と設定すると、左上隅の水平方向の隅の半径が 5 ピクセル、垂直方向の隅の半径が 10 ピクセルになることを意味します。対応するスクリプト機能は borderTopLeftRadius です。 CSS3 シャドウ ボックス - シャドウの使用法と概要関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
