技術文章 » html中陰影樣式是什麼程式碼

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

2022-09-23 18:00:29

樣式程式碼：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);」。

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

本教學操作環境：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>

效果圖：

1.png

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>

效果圖：

2.png

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>

3.png

（學習視訊分享：）

以上就是html中陰影樣式是什麼程式碼的詳細內容，更多請關注TW511.COM其它相關文章！