怎么使用CSS3中box shadow屬性

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

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

　　boxshadow語法

　　box-shadow:h-shadowv-shadowblurspreadcolorinset;

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

　　值 描述 測試

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

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

　　blur 可選。模糊距離。 測試

　　spread 可選。陰影的尺寸。 測試

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

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

　　boxshadow取值說明：

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

　　<offset-x><offset-y>:這是頭兩個<length>值，用來設(shè)置陰影偏移量。<offset-x>設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊。<offset-y>設(shè)置垂直偏移量，如果是負(fù)值則陰影位于元素上面?？捎脝挝徽埐榭?lt;length>。如果兩者都是0，那么陰影位于元素后面。這時如果設(shè)置了<blur-radius>或<spread-radius>則有模糊效果。

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

　　<spread-radius>:這是第四個<length>值。取正值時，陰影擴大；取負(fù)值時，陰影收縮。默認(rèn)為0，此時陰影與元素同樣大。

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

到此，關(guān)于“怎么使用CSS3中box shadow屬性”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>