1. 程式人生 > >css3之box-shadow

css3之box-shadow

.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