CSS3を使用したレイヤーシャドウとテキストシャドウ効果の詳細な紹介

box-shadow レイヤーシャドウ

box-shadow: 影の種類 省略可能で、デフォルトは外側投影で、値をインセットした場合は内側の影効果になります。
X 水平オフセットと Y 垂直オフセットは正と負の値を取ることができます。X が負の場合は左側に投影され、正の場合は右側に投影されます。 Y が負の場合は上に投影され、正の場合は下に投影されます。
影のサイズと拡大はPSのものと同じです。

ブラウザの互換性:
ブラウザごとに互換性が異なります。mozilla カーネル ブラウザは次のように記述されています (ただし、Firefox の新しいバージョンでは追加する必要はありません): -moz-box-shadow: Shadow type X 水平オフセット (正および負の値を取ることができます) Y 垂直オフセット (正および負の値を取ることができます) 影のサイズ 影の拡張影の色の値
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;   
}

レンダリング:

ボックスシャドウ投影タイプを次のように変更します。インセット、レンダリング:

例 2:

<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 テキストシャドウ

上記では、css3 レイヤーのシャドウ ボックス-シャドウについて説明しました。のレイヤーシャドウ、今日はテキストシャドウの効果を実現する方法を学びます。これらの 2 つの効果は、それぞれレイヤーとテキストのテクスチャを強化し、立体感を作成します。

構文:

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

text-shadow: ディスプレイスメント 説明:

は、レイヤーシャドウに似ており、カンマで区切って 1 つ以上のシャドウ効果のセットを同じオブジェクトに適用することもできます。 X 軸のオフセットは正または負の値を指定できます。X が正の場合は右にオフセットされ、負の場合は左にオフセットされます。 Y 軸のオフセットは正または負の値を指定できます。X が正の場合は下にオフセットされ、負の場合は上にオフセットされます。影の色の値は、#xxx、rgb、または rgba の透明色にすることができます。

例: text-shadow

<h1 id="雨打浮萍">雨打浮萍</h1>

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

box-shadow

<h2 id="专注于web前端开发">专注于web前端开发</h2>

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

です次のように:

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