CSSシャドウの書き方-CSSチュートリアル-php.cn

影の書き方: 1. テキストシャドウ「text-shadow: h-shadow v-shadow ブラーカラー;」; 2. ボーダーシャドウ「box-shadow: h-shadow v-shadow ブラースプレッドカラーインセット」 ; "。

CSSシャドウの書き方

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. CSS テキストシャドウの書き方

CSS では、text-shadow 属性を使用して影付きのテキストを実装できます。シャドウテキストです。

構文

text-shadow: h-shadow v-shadow blur color;

ログイン後にコピー

v-shadowぼかし#色注: text-shadow プロパティは、1 つ以上のシャドウテキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。例:

値	説明
h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます。
必須。垂直影の位置。負の値も許可されます。
オプション。ぼやけた距離。
オプション。影の色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

ログイン後にコピー

レンダリング:

2. CSS ボーダーシャドウの書き方 CSSシャドウの書き方

#CSS では、box-shadow 属性を使用して境界線のシャドウ効果を実現できます。box-shadow 属性は 1 つ以上のドロップダウンシャドウボックスを設定できます。

構文

box-shadow: h-shadow v-shadow blur spread color inset;

ログイン後にコピー

値

説明#スプレッド#color#インセットオプション。 (まず) シャドウを外側のシャドウから内側のシャドウに変更します。例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

ログイン後にコピー

(学習ビデオ共有:

css ビデオチュートリアル

)

以上がCSSシャドウの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

	h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます
v-shadow	必須。垂直影の位置。負の値が許可されます
#ぼかし#オプション。ファジー距離
オプション。影のサイズ
はオプションです。影の色。
	注: boxShadow プロパティは、ボックスに 1 つ以上のドロップシャドウを追加します。このプロパティは、シェードのカンマ区切りリストであり、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。
レンダリング: