這篇文章主要講解了“css3怎么實現(xiàn)圖片陰影效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3怎么實現(xiàn)圖片陰影效果”吧！

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的八步網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

css3實現(xiàn)陰影屬性有：1、text-shadow屬性，可實現(xiàn)文字陰影效果；2、box-shadow屬性，可實現(xiàn)邊框陰影效果；3、filter屬性，需要和drop-shadow()函數(shù)一起使用，可給圖像設(shè)置一個陰影效果。

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

css3實現(xiàn)陰影屬性

1、text-shadow屬性---實現(xiàn)文字陰影效果

text-shadow屬性用于設(shè)置帶陰影的文本；可設(shè)置陰影的像素長度、寬度和模糊的距離以及陰影的顏色。

    
        
         
         
     
     
        
文本陰影！
     

2、box-shadow屬性--實現(xiàn)邊框陰影效果

box-shadow屬性可以將陰影應(yīng)用于文本框，可設(shè)置中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。

box-shadow可以為元素添加陰影，支持添加一個或者多個。

box-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 投影方式;

參數(shù)：

注意：inset 可以寫在參數(shù)的第一個或最后一個，其它位置是無效的。

陰影模糊半徑：

此參數(shù)可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

效果：

陰影擴展半徑：

• 此參數(shù)可選，值可以是正負值，如果值為正數(shù)，整個陰影都延展擴大，反之值為負值時，則縮小。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

效果：

• X軸偏移量和Y軸偏移量值可以設(shè)置為負數(shù)

X軸偏移量為負數(shù)：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

效果：

Y軸偏移量為負數(shù)：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

效果：

外陰影：

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

效果：

內(nèi)陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

效果：

添加多個陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

效果：

3、filter 屬性

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

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

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

• h-shadow v-shadow (必須)

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

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

• (可選)

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

• (可選)

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

• 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。

• (可選)

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

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

感謝各位的閱讀，以上就是“css3怎么實現(xiàn)圖片陰影效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3怎么實現(xiàn)圖片陰影效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！