CSS3を使用したレイヤーシャドウとテキストシャドウ効果の詳細な紹介-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-09 10:25:13

オリジナル

2300 人が閲覧しました

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

ログイン後にコピー

レンダリング:

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

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

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

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

ログイン後にコピー

レンダリング:

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

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

ログイン後にコピー

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

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

<h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>

ログイン後にコピー

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

です次のように:
CSS3を使用したレイヤーシャドウとテキストシャドウ効果の詳細な紹介