另外，需要说明的是，border-radius，顾名思义，是要有border，才有radius，设置border-radius时，border-width不能为0。而类似这样直接给图片定义圆角的设计，赶紧给我住手！
其中，对于一些只有半边有圆角的对象，还可以单独定义，webkit和moz下单独定义每个圆角的属性分别如下：
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;而border-image适合背景不能完全平铺、填充色值的圆角元素。顾名思义，这个属性其实就是用一张基本圆角图片来实现圆角的效果，例如这些：
这类元素或多或少，因为一两个像素的阴影、发光效果不能完全平铺，就可以利用border-image的九宫格原理，由一张图片来定义背景、边 框、圆角。这种做法的缺陷是边框、圆角和背景都是图片上固定的，只能水平或垂直拉伸元素宽度，不能直接通过css修改角度和元素高度或宽度。尽管如此，我 们还是要感谢这个css属性带来的全新体验。
以这个按钮为例：
它的背景是这样一个内发光、阴影的样式，平铺的话阴影还好说，但是左侧的内发光就不好处理：
border-image的原理，是将这类图片分解成一个九宫格：
其中1、3、7、9作为四个角的背景；
2、4、6、8作为四个边的背景，如果不想改变原有按钮设计质感，只能2、8横向拉伸；
中间的5作为中间部分的背景，同样，要保持设计质感，只能横向拉伸。
border-image的具体写法是：
-webkit-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat;
-moz-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat;其中第一个参数是图片路径；
第2-5个参数是九宫格分割时分别距离上、右、下、左的距离，可以简写成1-3个，注意，这里的数值没有单位（几次效果没出来，查了半天发现都是因为这里习惯性的加了px，杯具），但是可以使用百分比；
