css3陰影 box-shadow

語法spa

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

參數介紹:blog

注:inset 能夠寫在參數的第一個或最後一個,其它位置是無效的。基礎

  陰影模糊半徑,其值只能爲正值,值越大陰影邊緣就越模糊,值爲0時陰影不具備模糊效果。擴展

  陰影擴展半徑,其值能夠爲正負值,值爲正,陰影擴大,值爲負,陰影縮小語法

 


 

用法im

外陰影: box-shadow: 0px 0px 12px 5px #33CC00; img

內陰影:box-shadow:0px 0px 12px 5px #33CC00 inset ;co

 

當外陰影設置了偏移量:box-shadow:5px 4px 6px  #666; ps

當內陰影設置了偏移量:box-shadow:5px 5px 5px #666 inset;

 

只設置X,Y偏移量:box-shadow:10px 10px  #666; 

在上個基礎上加陰影模糊半徑和陰影擴展半徑:box-shadow:10px 10px 5px 10px #666; 

 多個陰影: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

相關文章
相關標籤/搜索