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

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

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

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;   
}

レンダリング:

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

rreeerendering：

text-shadow textshadow

abovecss3レイヤーのシャドウボックスシャドウについて説明しました。レイヤーシャドウ 今日は、CSS3 のもう 1 つの属性である text-shadow を使用して、レイヤーとテキストのテクスチャを強調し、立体感を生み出す方法を学びます。

構文:

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

例: text-shadow

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>

効果は次のとおりです:

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

上記はこの記事の概要です。すべてのコンテンツが皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

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

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

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

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