這篇文章主要介紹“html中陰影樣式怎么設(shè)置”，在日常操作中，相信很多人在html中陰影樣式怎么設(shè)置問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html中陰影樣式怎么設(shè)置”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、東河網(wǎng)站維護(hù)、網(wǎng)站推廣。

樣式代碼：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);”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

• 文本陰影：使用text-shadow屬性

• 邊框陰影：使用box-shadow屬性

• 圖片陰影：使用filter屬性（需要和drop-shadow()函數(shù)一起使用）

1、文本陰影樣式

在html中，可使用text-shadow屬性來實(shí)現(xiàn)帶陰影的文本，text-shadow 屬性應(yīng)用于陰影文本。

語(yǔ)法

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

注意： text-shadow屬性連接一個(gè)或更多的陰影文本。屬性是陰影，指定的每2或3個(gè)長(zhǎng)度值和一個(gè)可選的顏色值用逗號(hào)分隔開來。已失時(shí)效的長(zhǎng)度為0。

示例：

    
        
         
         
     
     
        
文本陰影！
     

效果圖：

2、邊框陰影樣式

在html中，可使用box-shadow屬性來實(shí)現(xiàn)帶陰影樣式的邊框。box-shadow屬性可以設(shè)置一個(gè)或多個(gè)下拉陰影的框。

語(yǔ)法

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

注意：boxShadow 屬性把一個(gè)或多個(gè)下拉陰影添加到框上。該屬性是一個(gè)用逗號(hào)分隔陰影的列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來規(guī)定。省略長(zhǎng)度的值是 0。

示例：

	
		
	
	

		
邊框陰影

	

效果圖：

3、圖片陰影樣式

在html中，可使用filter屬性來實(shí)現(xiàn)帶陰影樣式的邊框。

filter 屬性定義了元素(通常是)的可視效果，當(dāng)和drop-shadow()函數(shù)一起使用，可給圖像設(shè)置一個(gè)陰影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速。參數(shù)如下：

• h-shadow v-shadow (必須)

• 這是設(shè)置陰影偏移量的兩個(gè) 值. 設(shè)定水平方向距離. 負(fù)值會(huì)使陰影出現(xiàn)在元素左邊. 設(shè)定垂直距離.負(fù)值會(huì)使陰影出現(xiàn)在元素上方。查看可能的單位.

• 如果兩個(gè)值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 and/or ，會(huì)有模糊效果).

• (可選)

• 這是第三個(gè)code>值. 值越大，越模糊，則陰影會(huì)變得更大更淡.不允許負(fù)值 若未設(shè)定，默認(rèn)是0 (則陰影的邊界很銳利).

• (可選)

• 這是第四個(gè) 值. 正值會(huì)使陰影擴(kuò)張和變大，負(fù)值會(huì)是陰影縮小.若未設(shè)定，默認(rèn)是0 (陰影會(huì)與元素一樣大小).

• 注意: Webkit, 以及一些其他瀏覽器 不支持第四個(gè)長(zhǎng)度，如果加了也不會(huì)渲染。

• (可選)

• 查看 該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會(huì)應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。

給圖像設(shè)置一個(gè)陰影效果:

到此，關(guān)于“html中陰影樣式怎么設(shè)置”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！