小編給大家分享一下使用CSS3中box-shadow來制作邊框陰影的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達十多年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：廣告設(shè)計等企業(yè)，備受客戶贊譽。

box-shadow屬性簡介

邊框陰影，是一種很常見的特效。

以前在CSS2.1時，如果想要為元素添加邊框陰影（就像上圖那樣），也是只能通過背景圖片的方法來實現(xiàn)。

在CSS3中，我們可以使用box-shadow屬性輕松地為元素添加陰影效果。

語法：

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

說明：

（1）x-shadow：設(shè)置水平陰影的位置（X軸），可以使用負值；

（2）y-shadow：設(shè)置垂直陰影的位置（y軸），可以使用負值；

（3）blur：設(shè)置陰影模糊半徑；

（4）spread：擴展半徑，設(shè)置陰影的尺寸；

（5）color：設(shè)置陰影的顏色；

（6）inset：這個參數(shù)默認不設(shè)置。默認情況下為外陰影，inset表示內(nèi)陰影。

舉例：

在瀏覽器預(yù)覽效果如下：

水平陰影位置x-shadow和垂直陰影位置y-shadow

水平陰影位置x-shadow和垂直陰影位置y-shadow的屬性取值，單位可以是px、em或百分比等，允許負值。

舉例：

在瀏覽器預(yù)覽效果如下：

以上是使用CSS3中box-shadow來制作邊框陰影的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！