toc

• 一 border-color
• 二 border-image
• 三 border-radius

Intro

一 border-color

css1中便有border-color属性，css3中增强了其功能，支持多个颜色设置，如果设置n个颜色值，且边框宽度为n像素，那么每个颜色占1个像素，依次显示在边框上。若边框宽度像素数量大于颜色个数，则除最后一个颜色外，其余颜色占1个像素的宽度，其余宽度被最后一个颜色占有。

• border-color派生的子属性：
• border-top-color
• border-right-color
• border-bottom-color
• `border-left-color

而对于边框的宽度不同情况如下图示

此种情况各个边框在分界处的角度与边框宽度的比例成正比。

还需要注意的是，在同时写了border-color和其派生的属性的情况下，对于支持css3的浏览器，派生属性的优先级高，不支持其css3属性的浏览器忽略派生属性，但是若同时有单一颜色的border-color（为了优雅降级）和多个颜色的border-color，浏览器只会解析单一颜色的border-color。因此推荐的写法是，降级的色使用border-color，多色的使用派生属性。

二 border-image

在css3中新增了border-image属性，可以在边框中使用图片，此属性Safari和chrome支持，FireFox3.5、Opera10.5才开始支持ie9及其一下不支持。

其语法为

border-image:none | <image> [ <number> | <percentage> ] {1,4} [ / <border-width> {1,4}]

• none 默认值，表示边框无图像
• <image>  使用绝对或者相对地址指定边框背景图
• <number> 设置边框宽度或者边框背景图像大小，使用固定像素值表示。
• <percentage> 设置边框背景图像的大小，使用百分比表示

注：当table的border-collapse设置为collapse时候，border-image和下文的border-radius属性无效。

其派生的属性有

• border-top-image
• border-right-image
• border-bottom-image
• border-left-image
• border-top-left-image
• border-top-right-image
• border-bottom-left-image
• border-bottom-right-image
• border-image-source:设置边框背景图像地址。
• border-image-slice：定义如何裁切背景图像，与背景图像的定位功能不同。
• border-image-repeat：定义边框背景图像的重复性。
• border-image-width：定义边框背景图像的显示大小（即边框显示大小）。浏览器还是使用border-width实现相同的功能。
• border-image-outset：定义边框背景图像的偏移位置（留待以后实例验证）。

此属性算是css中比较复杂的属性了，特别是图片裁切的有点复杂，可以到css3笔记——border-image-slice属性介绍以及各个浏览器的不同呈现查看介绍和实例。

三 border-radius

可以设置边框的圆角样式，其语法为border-radius: none [ <length> {1,4} ]

• none 默认值
• <length> 由数字和单位组成，不可为负值。

其派生的子属性有（以下属性的顺序也表示了若border-radius值为四个时候的解析顺序，其它个数属性值的解析和margin等的解析原则一样）：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

border-radius属性的值可以为两个值，第一个表示水平半径，第二个表示垂直半径，当只有一个值的时候，表示水平半径和垂直半径相同。

因为radius属性的半径值a和border的宽度值b的不同会产生不同的效果，对此我的理解便是：

首先浏览器依据圆角的位置（左上，右上····）和radius的半径形成各自的扇形区域，扇形的曲线内切与边框的最外边线，再根据边框的宽度进行圆角化**。**

若a>b 则在扇形的范围内边框以a为外边半径，a-b为内边半径变形成圆环（如下图示）。

若a<=b 则是边框在扇形曲线以外的部分被切切，边框的内边仍是直角（如下图示）。

总体来说浏览器是以边框的宽度保持不变，使之尽量平滑的原则来处理圆角。

最后有兴趣可以查看实例demo。