關於CSS3陰影使用方法介紹

一、邊框陰影

標準語法：

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中文網其他相關文章！