這篇文章主要介紹“css創(chuàng)建文本陰影適用于圖片嗎”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“css創(chuàng)建文本陰影適用于圖片嗎”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)禮縣,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

不適用；文本陰影“text-shadow”只能適用于文本文字上，對圖片不起作用。想給圖片添加陰影效果，有兩種方法：1、用box-shadow邊框陰影，語法“box-shadow:水平陰影 垂直陰影 blur spread color inset;”；2、用filter濾鏡，語法“filter:drop-shadow(水平陰影 垂直陰影 blur spread color);”。

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

css創(chuàng)建文本陰影不適用于圖片。

文本陰影“text-shadow”只能適用于文本文字上，對圖片不起作用。

    
        
         
         
     
     
        
文本陰影！
		
     

可以看到文字上有陰影效果，到圖片上沒有。

想要在圖片添加陰影效果，有兩種方法：

• box-shadow屬性

• filter:drop-shadow()

下面給大家介紹一下

1、使用box-shadow屬性

box-shadow 屬性向框添加一個或多個陰影。

語法：box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow    必需。水平陰影的位置。允許負(fù)值。

• v-shadow    必需。垂直陰影的位置。允許負(fù)值。

• blur    可選。模糊距離。

• spread    可選。陰影的尺寸。

• color    可選。陰影的顏色。請參閱 CSS 顏色值。

• inset    可選。將外部陰影 (outset) 改為內(nèi)部陰影。

示例：

2、使用filter:drop-shadow()

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

drop-shadow()可給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。

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

示例：

img {
	-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
	/*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */

	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}

關(guān)于“css創(chuàng)建文本陰影適用于圖片嗎”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。