CSSで影効果を追加するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

CSSで影効果を追加するにはどうすればよいですか? (コード例)

青灯夜游

リリース： 2019-11-27 10:15:37

オリジナル

6091 人が閲覧しました

CSSで影効果を追加するには? text-shadow 属性と box-shadow 属性を使用して追加できます。以下の記事では、text-shadow 属性と box-shadow 属性がどのように影効果を追加するかを紹介します。必要な方は参考にしていただければ幸いです。

CSSで影効果を追加するにはどうすればよいですか? (コード例)

おすすめマニュアル: 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 属性の値が使用されます。

text-shadow 属性は、要素のテキストに適用する影効果のカンマ区切りのリストを受け入れます。シャドウ効果は指定された順序で適用されるため、相互にカバーすることはできますが、テキスト自体をカバーすることはできません。シャドウ効果は境界線の寸法を変更しませんが、境界を超えて広がる可能性があります。

3. コード例

主に text-shadow のシャドウリストを使用し、適切なカラーマッチングを使用して、目的の効果を実現します。

text-shadow:0.1em 0.1em 0.3em #333333;

ログイン後にコピー

レンダリング:

おすすめ関連記事:

CSSで影効果を追加するにはどうすればよいですか? (コード例) 1.

CSSで片面シャドウ効果を実現する方法

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 サイトの他の関連記事を参照してください。