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

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比梁溪網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式梁溪網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋梁溪地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

box-shadow屬性向框添加一個(gè)或多個(gè)陰影。提示：請(qǐng)使用border-image-*屬性來(lái)構(gòu)造漂亮的可伸縮按鈕！

boxshadow語(yǔ)法

box-shadow:h-shadowv-shadowblurspreadcolorinset;

注釋：box-shadow向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由2-4個(gè)長(zhǎng)度值、可選的顏色值以及可選的inset關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是0。

值 描述 測(cè)試

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

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

blur 可選。模糊距離。 測(cè)試

spread 可選。陰影的尺寸。 測(cè)試

color 可選。陰影的顏色。請(qǐng)參閱CSS顏色值。 測(cè)試

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

boxshadow取值說(shuō)明：

inset:默認(rèn)陰影在邊框外。使用inset后，陰影在邊框內(nèi)（即使是透明邊框），背景之上內(nèi)容之下。也有些人喜歡把這個(gè)值放在最后，瀏覽器也支持。

:這是頭兩個(gè)值，用來(lái)設(shè)置陰影偏移量。設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊。設(shè)置垂直偏移量，如果是負(fù)值則陰影位于元素上面?？捎脝挝徽?qǐng)查看。如果兩者都是0，那么陰影位于元素后面。這時(shí)如果設(shè)置了或則有模糊效果。

:這是第三個(gè)值。值越大，模糊面積越大，陰影就越大越淡。不能為負(fù)值。默認(rèn)為0，此時(shí)陰影邊緣銳利。

:這是第四個(gè)值。取正值時(shí)，陰影擴(kuò)大；取負(fù)值時(shí)，陰影收縮。默認(rèn)為0，此時(shí)陰影與元素同樣大。

:相關(guān)事項(xiàng)查看。如果沒有指定，則由瀏覽器決定——通常是color的值，不過(guò)目前Safari取透明。

到此，關(guān)于“怎么使用CSS3中box shadow屬性”的學(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ī)?lái)更多實(shí)用的文章！

文章名稱：怎么使用CSS3中boxshadow屬性-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/pedei.html