css如何實(shí)現(xiàn)內(nèi)陰影

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)內(nèi)陰影，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

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

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

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

關(guān)于“css如何實(shí)現(xiàn)內(nèi)陰影”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。