使用CSS3中box-shadow來制作邊框陰影的方法
小編給大家分享一下使用CSS3中box-shadow來制作邊框陰影的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十多年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：廣告設(shè)計(jì)等企業(yè)，備受客戶贊譽(yù)。
box-shadow屬性簡介
邊框陰影，是一種很常見的特效。
以前在CSS2.1時(shí)，如果想要為元素添加邊框陰影（就像上圖那樣），也是只能通過背景圖片的方法來實(shí)現(xiàn)。
在CSS3中，我們可以使用box-shadow屬性輕松地為元素添加陰影效果。
語法：
box-shadow：x-shadow y-shadow blur spread color inset;
說明：
（1）x-shadow：設(shè)置水平陰影的位置（X軸），可以使用負(fù)值；
（2）y-shadow：設(shè)置垂直陰影的位置（y軸），可以使用負(fù)值；
（3）blur：設(shè)置陰影模糊半徑；
（4）spread：擴(kuò)展半徑，設(shè)置陰影的尺寸；
（5）color：設(shè)置陰影的顏色；
（6）inset：這個(gè)參數(shù)默認(rèn)不設(shè)置。默認(rèn)情況下為外陰影，inset表示內(nèi)陰影。
舉例：
CSS3 box-shadow屬性
在瀏覽器預(yù)覽效果如下：
水平陰影位置x-shadow和垂直陰影位置y-shadow
水平陰影位置x-shadow和垂直陰影位置y-shadow的屬性取值，單位可以是px、em或百分比等，允許負(fù)值。
舉例：
CSS3 box-shadow屬性
在瀏覽器預(yù)覽效果如下：
以上是使用CSS3中box-shadow來制作邊框陰影的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章名稱：使用CSS3中box-shadow來制作邊框陰影的方法
標(biāo)題鏈接：http://m.jiaotiyi.com/article/ihsgoc.html