CSS3レイヤーシャドウとテキストシャドウの使用

この記事では、CSS3 でのレイヤー シャドウとテキスト シャドウの使用方法を主に紹介します。必要な友達に参考にしてください。

レイヤー シャドウ属性とテキスト シャドウ。シャドウ属性は使用方法が似ています。これらはすべて X 軸と Y 軸の座標系を使用してシャドウの拡張を制御します。ここでは、CSS3 レイヤーのシャドウとテキストのシャドウ効果の使用方法を詳しく説明します。レイヤーシャドウ

box-shadow: 影の種類 はめ込むとインナーシャドウ効果になります。 X 水平オフセットと Y 垂直オフセットは正と負の値を取ることができます。X が負の場合は左側に投影され、正の場合は右側に投影されます。 Y が負の場合は上に投影され、正の場合は下に投影されます。 影のサイズと拡大はPSのものと同じです。

ブラウザの互換性:

ブラウザごとに互換性が異なります。mozilla カーネル ブラウザは次のように記述されています (ただし、Firefox の新しいバージョンでは追加する必要はありません):

Webkit カーネル ブラウザは次のように記述されます: -webkit-box-shadow: 影のタイプ X 水平オフセット (正および負の値を取ることができます)正と負の値を取る) Y 垂直オフセット (正と負の値を取ることができる) 影のサイズ 影の拡張影の色の値

例 1:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:3px 3px 3px 3px #000;   
 /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}

box-shadow 投影タイプを inset に変更する、レンダリング：examepample 2：

rreeerendering：

text-shadow textshadow

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
 /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

box-shadowの比較

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>

効果は次のとおりです:

表示効果は次のとおりです:

関連する推奨事項:

CSS で透明度を設定するための rgba と不透明度の使用の違いについての分析

CSS3 を使用して複数の要素を順番に表示する方法

CSS を使用して背景を作成する方法重複を避けるために画像を引き伸ばして塗りつぶします 表示

以上がCSS3レイヤーシャドウとテキストシャドウの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。