css3之box-shadow
阿新 • • 發佈:2017-06-14
.cn 代碼 alt -s height css3 spa 投影 邊緣
box-shadow是向盒子添加陰影。支持添加一個或者多個。
用法:
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
代碼:
.boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px #666; } .boxshadow-inset{ width:100px; height:100px; box-shadow:4px 4px 6px #666 inset; } .boxshadow-multi{ width:100px; height:100px; box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
對應的效果如下
1、陰影模糊半徑與陰影擴展半徑的區別
陰影模糊半徑:此參數可選,其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;
陰影擴展半徑:此參數可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值時,則縮小;
2、X軸偏移量和Y軸偏移量值可以設置為負數
引http://www.imooc.com/code/382
css3之box-shadow