検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの影スタイルのコードは何ですか

HTMLの影スタイルのコードは何ですか

青灯夜游
青灯夜游オリジナル
2022-09-23 16:32:135125ブラウズ

スタイル コード: 1. テキスト シャドウ スタイル "text-shadow: h-shadow v-shadow ブラー カラー;"; 2. ボーダー シャドウ スタイル "box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;"; 3. ピクチャーシャドウスタイル「filter:drop-shadow(h-shadow v-shadow ぼかしスプレッドカラー);」。

HTMLの影スタイルのコードは何ですか

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

HTML では、要素に影のスタイルを追加する方法が 3 つあります。

  • テキストの影: text-shadow 属性を使用します。

  • ボーダーシャドウ: box-shadow 属性を使用します

  • #ピクチャシャドウ: filter 属性を使用します (drop-shadow() 関数で使用する必要があります)

1. テキスト シャドウ スタイル

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

構文

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

値説明v-shadowぼかし オプション。影の色。 例:
h-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の影スタイルのコードは何ですか

HTML では、box-shadow 属性を使用して、影スタイルの境界線を実装できます。 box-shadow プロパティは、1 つ以上のドロップダウン シャドウ ボックスを設定できます。 構文

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

値

説明#スプレッド#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>

效果图：

HTMLの影スタイルのコードは何ですか

3、图片阴影样式

在html中，可使用filter属性来实现带阴影样式的边框。

filter 属性定义了元素(通常是HTMLの影スタイルのコードは何ですか)的可视效果，当和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>

HTMLの影スタイルのコードは何ですか

（学习视频分享：css视频教程）

h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます
v-shadow 必須。垂直影の位置。負の値が許可されます
#ぼかし#オプション。ファジー距離
オプション。影のサイズ
はオプションです。影の色。

以上がHTMLの影スタイルのコードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 firefox css css3 html webkit Filter Length
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLの一行コメント文字とは何ですか?次の記事：HTMLの一行コメント文字とは何ですか?

関連記事

続きを見る