css3圓角和陰影效果

border-radius

圓角的方塊：

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */ 

效果：

實心上半圓：

方法：把高度(height)設為寬度（width）的一半，並且只設置左上角和右上角的半徑與元素的高度一致（也可以大於高度）。

#box{
    width:80px;
    height:40px;/*寬度的一半*/
    background:skyblue;
    border-radius:40px 40px 0 0;/*4個值分別代表上、右、下、左*/
}

效果：

實心圓：

方法：把寬度（width）與高度(height)值設置為一致（也就是正方形），並且四個圓角值都設置為它們值的一半。

#box{
    width:80px;
    height:80px;
    background:skyblue;
    border-radius:40px;
}

效果：

實心左半圓形：

方法：元素寬度為高度的一半，把左上角和左下角設為高度的一半。

#box{
    width:40px;
    height:80px;
    background:skyblue;
    border-radius:40px 0 0 40px;
}

效果：

box-shadow

box-shadow可以為元素添加陰影，支持添加一個或者多個。

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

參數：

注意：inset 可以寫在參數的第一個或最后一個，其它位置是無效的。

陰影模糊半徑：

此參數可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

效果：

陰影擴展半徑：

此參數可選，值可以是正負值，如果值為正數，整個陰影都延展擴大，反之值為負值時，則縮小。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

 

效果：

X軸偏移量和Y軸偏移量值可以設置為負數

X軸偏移量為負數：

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:-5px 5px 5px #666;
6 }

效果：

Y軸偏移量為負數：

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:5px -5px 5px #666;
6 }

效果：

外陰影：

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

 

效果：

內陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

 

效果：

添加多個陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

 

效果：