陰影效果

陰影 :box-shadow

box-shadow是向盒子添加陰影。支持添加一個或者多個。

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

wKioL1Zf8fXQVOTKAABXQP0Rlk4562.jpg

注意:inset 可以寫在參數的第一個或最後一個,其它位置是無效的。

如果添加多個陰影,只需用逗號隔開即可。如:

.box_shadow{
   box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

陰影模糊半徑與陰影擴展半徑的區別:
陰影模糊半徑:此參數可選,其值只能是爲正值,如果其值爲0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;
陰影擴展半徑:此參數可選,其值可以是正負值,如果值爲正,則整個陰影都延展擴大,反之值爲負值時,則縮小;

X軸偏移量和Y軸偏移量值可以設置爲負數:
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章