ホームページ > 記事 > ウェブフロントエンド > CSSで影効果を追加するにはどうすればよいですか? (コード例)
CSSで影効果を追加するにはどうすればよいですか? (コード例)
- 青灯夜游オリジナル
- 2018-09-11 10:14:126045ブラウズ
CSSで影効果を追加するには? text-shadow 属性と box-shadow 属性を使用して追加できます。以下の記事では、text-shadow 属性と box-shadow 属性がどのように影効果を追加するかを紹介します。必要な方は参考にしていただければ幸いです。
おすすめマニュアル: CSS3最新版リファレンスマニュアル
1: テキストの影効果を追加する(text-shadow属性)
1 text-shadowとは
text-shadow はテキストへの影の追加をサポートしているため、画像を使用せずにデザイン中に CSS3 属性を使用してテキストのテクスチャを増やすことができます。現在サポートされているブラウザには、Firefox 3.1 以降、Safari 3 以降、Opera 9.5 以降、その他の最新のブラウザが含まれます。データは偏っている可能性があります)。もちろん、IE ファミリではサポートできません。
2. text-shadow: rreee
color: color; 「長さ、Y 軸方向」の順で「長さシャドウブラー半径」は浮動小数点数と単位識別子で構成される長さの値を表します。負の値（または 0 値）にすることができ、影の水平方向の延長距離を指定します。
例の正の値:
text-shadow:color length length length;
text-shadow 属性の最初の値は水平移動を表し、2 番目の値は垂直移動を表します。正の値は右または下を意味し、負の値は左または上を意味します。半径を意味し (この値はオプション)、4 番目の値は影の色を表します (この値はオプション)。この色の値は影効果の長さの値の前後に配置できます。色が指定されていない場合は、代わりに color 属性の値が使用されます。
3. コード例
主に text-shadow のシャドウ リストを使用し、適切なカラー マッチングを使用して、目的の効果を実現します。text-shadow:0.1em 0.1em 0.3em #333333;レンダリング: おすすめ関連記事:
1.
2.CSS3でボックスシャドウを実現する方法? CSS3の影効果
関連ビデオチュートリアル:
1.CSSビデオチュートリアル-翡翠少女般若心経編
2. ボックス(枠線)の影効果(box-shadow属性)を追加します
1 .box-shadow の構文
E {box-shadow: inset x-offset y-offset Blur-radius Spread-Radius color};E {box-shadow: 投影モード X 軸オフセット Y 軸オフセット シャドウのぼかし半径 シャドウの拡張半径 シャドウの色}; 値:
1. シャドウのタイプ: このパラメータはオプションで、値「inset」のみを使用すると、外側のシャドウが回転します。内側のシャドウに。2. シャドウの垂直方向のオフセットを指します。正の値の場合、シャドウはオブジェクトの下部にあります。オブジェクトの上部。
4. シャドウのブラー半径: このパラメーターは正の値のみです。値が大きいほど、エッジがブラーされません。影の拡張半径: このパラメータは正または負の値を指定でき、それ以外の場合は影が縮小されます。 color: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は異なり、特に Webkit カーネル下の Safari および Chrome ブラウザは無色、つまり透明になります。このパラメータを省略しないことをお勧めします。
2. 互換性を考慮する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字阴影效果</title>
<style type="text/css">
.demo{
width: 600px;
overflow: hidden;
margin: 10px auto;
}
p {
width: 300px;
font-size: 3em;
margin: 10px;
padding: 20px;
text-align: center;
}
.p1 {
text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
color: red;
}
.p2 {
background: black;
text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
color: red;
}
.p3 {
text-shadow: -1px -1px white, 1px 1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p4 {
text-shadow: 1px 1px white, -1px -1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p5 {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
color: #ffffff;
background: #CCC;
}
.p6 {
text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
color: #d1d1d1;
background: #CCC;
}
</style>
</head>
<body>
<div class="demo">
<p class="p1">多色阴影效果</p>
<p class="p2">火焰效果</p>
<p class="p3">立体凸起效果</p>
<p class="p4">立体凹下效果</p>
<p class="p5">描边效果</p>
<p class="p6">外发光效果</p>
</div>
</body>
</html>3. コード例
//Firefox4.0- -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;レンダリング:
以上がCSSで影効果を追加するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。