怎么使用CSS3中box shadow屬性

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

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

　　boxshadow語法

　　box-shadow:h-shadowv-shadowblurspreadcolorinset;

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

　　值 描述 測試

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

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

　　blur 可選。模糊距離。 測試

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

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

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

　　boxshadow取值說明：

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

　　<offset-x><offset-y>:這是頭兩個<length>值，用來設置陰影偏移量。<offset-x>設置水平偏移量，如果是負值則陰影位于元素左邊。<offset-y>設置垂直偏移量，如果是負值則陰影位于元素上面。可用單位請查看<length>。如果兩者都是0，那么陰影位于元素后面。這時如果設置了<blur-radius>或<spread-radius>則有模糊效果。

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

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

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

到此，關于“怎么使用CSS3中box shadow屬性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！