效果一、圆角效果 border-radius
实心上半圆：
方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。
div { height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ }实心圆： 方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：
div { height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }效果二、阴影 box-shadow
box-shadow是向盒子添加阴影，可以添加一个或者多个，具体的语法为：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]
其中
X轴偏移量：必需，水平阴影的位置。允许负值
Y轴便宜量：必需，垂直阴影的位置。允许负值
阴影模糊半径：可选，模糊距离，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
阴影扩展半径：可选，阴影的尺寸，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：可选，省略默认为黑色
投影方式：可选，省略为外阴影方式，设置inset为内部阴影方式
效果三、边框图片border-image
根据border-image的语法，如图
其中：repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复
round可以理解为圆满的铺满，图片不会被裁剪，为了实现圆满所以会压缩（或拉伸）
stretch就是拉伸，有多长拉多长，让图片拉伸成对应边框的长度
注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。
