一、邊框陰影
標準語法:
box-shadow : h-offset v-offset blur spread color [ inset ] ,...
[ 偏移量向右下為正值,左上為負值 ]
a、若有多重陰影,用逗號分隔,且依序往下疊加,最先寫的在最上面
b、若有inset,則為內側陰影,但要注意:如果只是簡單的在原來陰影上加inset,則陰影在相反一側內部,並非簡單翻轉反向。
c、擴展spread最大的好處和作用是當取負值時屏蔽或減少對其餘3邊的干擾
d、如果元素內部DIV填充有顏色,則內側陰影會被有顏色的部分遮蔽,但可將內部有顏色的DIV設定為relative並將z-index設為-1即可顯示被遮蔽的內側陰影。
[這種情況較少,而且有諸多限制]
二、文字陰影
#標準語法:
text-shadow : h-offset v-offset blur color ,...
[ 偏移量向右下為正值,左上為負值 ]
a、若有多重陰影,用逗號分隔,且依次往下疊加,最早寫的在最上面
效果二:Apple Style Effect
.demo4 { color: #000;
text-shadow: 0 1px 1px #ff#fff; }
效果三:Photoshop Emboss Effect
.demo5 { color: #ccc;
text-shadow: -1px -1px 0# #fff,1px 1px 01p131px 0 #444;}
效果四:Blurytext Effect
.demo6 { color: transparent;
text-shadow: 0 0 5px #f96;}
;七:3D text effect
.demo10 { color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8px rgba(197, 223, 248,0.8),2px235, ),3px 3px rgba(197, 223,
以上是關於CSS3陰影使用方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!