CSSシャドウの書き方
影の書き方: 1. テキストシャドウ「text-shadow: h-shadow v-shadow ブラーカラー;」; 2. ボーダーシャドウ「box-shadow: h-shadow v-shadow ブラースプレッドカラーインセット」 ; "。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
1. CSS テキストシャドウの書き方
CSS では、text-shadow 属性を使用して影付きのテキストを実装できます。シャドウテキストです。
構文
text-shadow: h-shadow v-shadow blur color;
| 値 | 説明 |
|---|---|
| h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます。 | |
| 必須。垂直影の位置。負の値も許可されます。 | |
| オプション。ぼやけた距離。 | #色 |
| オプション。影の色。 | 注: text-shadow プロパティは、1 つ以上のシャドウ テキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。 |
<!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 id="文本阴影">文本阴影！</h1>
</body>
</html>2. CSS ボーダーシャドウの書き方
構文
box-shadow: h-shadow v-shadow blur spread color inset;
値
| h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます | |
|---|---|
| v-shadow | 必須。垂直影の位置。負の値が許可されます |
| #ぼかし#オプション。ファジー距離 | |
| オプション。影のサイズ | |
| はオプションです。影の色。 | #インセット |
| 注: boxShadow プロパティは、ボックスに 1 つ以上のドロップ シャドウを追加します。このプロパティは、シェードのカンマ区切りリストであり、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。 | |
| レンダリング: | (学習ビデオ共有: |
