CSS3边框与圆角

CSS3圆角

border-radius属性

• 概念
  一个最多可指定四个border-*-radius属性的复合属性，这个属性允许你为元素添加圆角边框。

• 语法
  border-radius：length|% length|% length|% length|%(4个属性值只能为长度或者百分比)

• 兼容性
  IE8+、FireFox4+、Chrome、Safari5+、Opera

• 多个值的时候
  四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  三个值：第一个值为左上角，第二值为右上角和左下角，第三个值为右下角。
  两个值：第一个值为左上角和右下角，第二个值为右上角和左下角。
  一个值：四个圆角值相同。

• 也可以分开写
  border-top-left-radius：定义左上角的弧度。
  border-top-right-radius：定义右上角的弧度。
  border-bottom-right-radius：定义右下角的弧度。
  border-bottom-left-radius：定义左下角的弧度。

CSS3盒阴影

box-shadow属性

• 概念
  box-shadow属性可以设置一个或者多个下拉阴影的框。

• 语法
  box-shadow：h-shadow v-shadow blur spread color inset;

属性值	描述
h-shadow	设置阴影在水平方向上的偏移量
v-shadow	设置阴影在竖直方向上的偏移量
blur	设置由阴影的边框往阴影内部X长度进行渐变，X为blur的值
spread	设置原本的阴影图案往上下左右四个方向分别扩展X长度，X为spread的值
color	设置阴影的背景颜色
inset	值为inset，设置内阴影，将从盒子的上边和左边向内分别移动一定的距离来形成盒子的阴影，原本盒子设置显示颜色的面积会变小，但是实际面积不变。

• 兼容性
  IE8+、FireFox4+、Chrome、Safari5+、Opera

CSS3边界图片

border-image属性

• 概念
  将边框设置为想要的背景图片。
• 语法
  border-image：source slice width outset repeat;

可分开写成5个单独的属性：

属性	属性值	描述
border-image-source	none或者image	指定要使用的图像，而不是由border-style属性设置的边框样式
border-image-slice	number、%、fill	指定图像边界向内偏移
border-image-width	number、%、auto	指定图像边界的宽度
border-image-outset	length、number	指定将边框图像向边框外部扩展一定的量
border-image-repeat	stretch、repeat、round、initial、inherit	指定图像边界是否应重复（repeat）、拉伸（stretch）、铺满（round）

• 兼容性
  IE不兼容、FireFox、Chrome、Safari6+、Opera不兼容