スタイル コード: 1. テキスト シャドウ スタイル "text-shadow: h-shadow v-shadow ブラー カラー;"; 2. ボーダー シャドウ スタイル "box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;"; 3. ピクチャーシャドウスタイル「filter:drop-shadow(h-shadow v-shadow ぼかしスプレッドカラー);」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
HTML では、要素に影のスタイルを追加する方法が 3 つあります。
1. テキスト シャドウ スタイル
HTML では、text-shadow 属性を使用してシャドウ テキストを実装できます。属性は影付きテキストに適用されます。
構文
text-shadow: h-shadow v-shadow blur color;
値 | 説明 |
h-shadow# ########必須。水平方向の影の位置。負の値も許可されます。
|
| v-shadow
必須。垂直影の位置。負の値も許可されます。
|
| ぼかし
オプション。ぼやけた距離。
|
#色 |
オプション。影の色。 |
注: text-shadow プロパティは、1 つ以上のシャドウ テキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。 |
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影!</h1>
</body>
</html>
レンダリング:
2. 境界線の影のスタイル
HTML では、box-shadow 属性を使用して、影スタイルの境界線を実装できます。 box-shadow プロパティは、1 つ以上のドロップダウン シャドウ ボックスを設定できます。 構文
box-shadow: h-shadow v-shadow blur spread color inset;
値
説明
|
h-shadow# ########必須。水平方向の影の位置。負の値も許可されます |
v-shadow |
必須。垂直影の位置。負の値が許可されます |
#ぼかし#オプション。ファジー距離 |
|
#スプレッド
オプション。影のサイズ |
|
#color
はオプションです。影の色。 |
| #インセット
オプション。シャドウを外側のシャドウから内側のシャドウに変更します (開始時) |
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
示例:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color:red;
-moz-box-shadow: 10px 10px 5px #888888;
/* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影</div>
</body>
</html>
效果图:
3、图片阴影样式
在html中,可使用filter属性来实现带阴影样式的边框。
filter 属性定义了元素(通常是)的可视效果,当和drop-shadow()函数一起使用,可给图像设置一个阴影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。参数如下:
h-shadow v-shadow (必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ,会有模糊效果).
(可选)
这是第三个code>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
(可选)
这是第四个 值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
(可选)
查看 该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>给图像设置一个阴影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
</body>
</html>
(学习视频分享:css视频教程)
以上がHTMLの影スタイルのコードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。