css3边框(圆角，阴影，边框应用图片)

一，圆角

使用border-radius。border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

实心圆

方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

实心上半圆

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

实心左半圆

div{
    height:100px;
    width:50px;
    background:#9da;
    border-radius:50px 0 0 50px;
    }

二，阴影

box-shadow：x轴偏移量  y轴偏移量   [阴影模糊半径]    [阴影扩展半径]   [阴影颜色]   [投影方式]   带[]都是可选的

<offset-x>和<offset-y>分别是x轴偏移量和y轴偏移量，1.如果投影方式是外投影：x轴偏移量如果是负值位于元素左边，y轴偏移量如果是负值位于元素上面，2.如果投影方式是内投影：x轴偏移量如果是负值位于元素右边，y轴偏移量是负值位于元素下方，3.如果x，y轴偏移量都是0那阴影就在元素后面，如果这时候设置了模糊半径和扩展半径，那就有模糊效果

<blur-radius>是第三个参数。值越大模糊面积越大，阴影越大越淡，不能位负值，可以为0，默认为0，此时阴影边缘锐利

<spread-radius>是第四个参数。正值时阴影扩大，负值时阴影缩小，默认0，此时阴影和元素一般大

<color>是第五个参数，默认黑色

inset 可以写在参数的第一个或最后一个，其它位置是无效的。

三，边框应用图片

http://img.mukewang.com/52e22a1c0001406e03040221.jpg

<div id="border_image">
请为我镶嵌上漂亮的画框吧
</div>

#border_image 
{
    margin:0 auto;
	height:100px;
	line-height:100px;
	text-align:center;
	font-size:30px;
	width:450px;
	border:15px solid #ccc; /*一定要*/
    border-image:url('http://img.mukewang.com/52e22a1c0001406e03040221.jpg') 15 repeat;/*一定要  这里是15不是15px */
}

参考：CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

参考：CSS3 border-image 彻底明白