スタイル コード: 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 id="文本阴影">文本阴影！</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="/static/imghw/default1.png" data-src="pineapple.jpg" class="lazy" alt="Pineapple" style="max-width:90%" style="max-width:90%">
</body>
</html>ログイン後にコピー
（学习视频分享：css视频教程）
以上がHTMLの影スタイルのコードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML 順序付きリスト
Sep 04, 2024 pm 04:43 PM
HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
See all articles
)的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。
