CSS3 box-shadow(陰影使用)

css3 box-shadow 內陰影與外陰影

 

1-

box-shadow具體使用方法，語法：

 

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 換句說： 對象選擇器 {text-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色}

 

取值：投放方式：默認是外陰影 ，

 

 

box-shadow屬性至多有6個參數設置，他們分別取值：

陰影類型：此參數是一個可選值，若是不設值，其默認的投影方式是外陰影；若是取其惟一值「inset」,就是將外陰影變成內陰影，也就是說設置陰影類型爲「inset」時，其投影就是內陰影；

X-offset:是指陰影水平偏移量其值能夠是正負值能夠取正負值，若是值爲正值，則陰影在對象的右邊，反之其值爲負值時，陰影在對象的左邊；

Y-offset:是指陰影的垂直偏移量，其值也能夠是正負值，若是爲正值，陰影在對象的底部，反之其值爲負值時，陰影在對象的頂部；

陰影模糊半徑：此參數是可選，，但其值只能是爲正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴展半徑：此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值是，則縮小

 -moz-box-shadow:5px 5px 5px #999 inset;              
    -webkit-box-shadow:5px 5px 5px #999 inset;           
    box-shadow:5px 5px 5px #999 inset;
-moz-box-shadow:-5px -5px 5px #999 inset;            
-webkit-box-shadow:-5px -5px 5px #999 inset;         
box-shadow:-5px -5px 5px #999 inset;