溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html中陰影樣式怎么設置”，在日常操作中，相信很多人在html中陰影樣式怎么設置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html中陰影樣式怎么設置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
樣式代碼：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);”。
本教程操作環境：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>
h2 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h2>文本陰影！</h2>
</body>
</html>效果圖：
2、邊框陰影樣式
在html中，可使用box-shadow屬性來實現帶陰影樣式的邊框。box-shadow屬性可以設置一個或多個下拉陰影的框。
語法
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負值 |
| v-shadow | 必需的。垂直陰影的位置。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小 |
| color | 可選。陰影的顏色。 |
| 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>效果圖：
3、圖片陰影樣式
在html中，可使用filter屬性來實現帶陰影樣式的邊框。
filter 屬性定義了元素(通常是<img>)的可視效果，當和drop-shadow()函數一起使用，可給圖像設置一個陰影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數如下：
h-shadow v-shadow (必須)
這是設置陰影偏移量的兩個 <length>值. <offset-x> 設定水平方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位.
如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).
<blur-radius> (可選)
這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
<spread-radius> (可選)
這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
<color> (可選)
查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基于瀏覽器。在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" height="300">
</body>
</html>
到此，關于“html中陰影樣式怎么設置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
