首頁 > 文章 > web前端 > html中陰影樣式是什麼程式碼

html中陰影樣式是什麼程式碼

青灯夜游原創: 2022-09-23 16:32:135051瀏覽

樣式程式碼：1、文字陰影樣式「text-shadow: h-shadow v-shadow blur color;」；2、邊框陰影樣式「box-shadow: h-shadow v-shadow blur spread color inset ;」；3、圖片陰影樣式「filter:drop-shadow(h-shadow v-shadow blur spread color);」。

html中陰影樣式是什麼程式碼

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在html中，有三種方法可以為元素添加陰影樣式：

文字陰影：使用text-shadow屬性
#邊框陰影：使用box-shadow屬性
圖片陰影：使用filter屬性（需要和drop-shadow()函數一起使用）

##1、文字陰影樣式

在html中，可使用text-shadow屬性來實作帶陰影的文本，text-shadow 屬性套用於陰影文本。

語法

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

值#描述必要。水平陰影的位置。允許負值。必要。垂直陰影的位置。允許負值。可選。模糊的距離。 #可選。陰影的顏色。


h-shadow
v-shadow
blur
color

注意： text-shadow屬性連接一個或更多的陰影文字。屬性是陰影，指定的每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>

效果圖：

html中陰影樣式是什麼程式碼

#2、邊框陰影樣式

在html中，可使用box-shadow屬性來實作帶有陰影樣式的邊框。 box-shadow屬性可以設定一個或多個下拉陰影的方塊。

語法

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

值#說明必要的。水平陰影的位置。允許負值#必要的。垂直陰影的位置。允許負值可選。模糊距離可選。陰影的大小可選。陰影的顏色。 inset可選。從外層的陰影（開始時）改變陰影內側陰影#

注意：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
blur
spread
color

以上是html中陰影樣式是什麼程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 firefox css css3 html webkit Filter Length

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html單行註解符號有哪些下一篇：html單行註解符號有哪些

看更多