css如何實現內陰影

這篇文章將為大家詳細講解有關css如何實現內陰影，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　CSS代碼:

　　/*offset-x|offset-y|color*/

　　box-shadow:60px-16pxteal;

　　/*offset-x|offset-y|blur-radius|color*/

　　box-shadow:10px5px5pxblack;

　　/*offset-x|offset-y|blur-radius|spread-radius|color*/

　　box-shadow:2px2px2px1pxrgba(0,0,0,0.2);

　　/*inset|offset-x|offset-y|color*/

　　box-shadow:inset5em1emgold;

　　/*Anynumberofshadows,separatedbycommas*/

　　box-shadow:3px3pxred,-1em00.4emolive;

　　/*Globalkeywords*/

　　box-shadow:inherit;

　　box-shadow:initial;

　　box-shadow:unset;

　　取值說明：

　　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>。如果沒有指定，則由瀏覽器決定&mdash;&mdash;通常是color的值，不過目前Safari取透明。

關于“css如何實現內陰影”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。