CSS-描边

CSS的描边是CSS中常用的属性，属于基础知识。但除了常用的纯色描边之外，CSS还有很多类型的描边。我是发现弄不清border-image是如何渲染的所以才写了这一篇文章。

outline

outline 用于描绘HTML元素的轮廓，它和border最大的区别就是outline不占空间，主要表现在

• 不受box-sizing影响
• 不会撑开周边的内容
• 可以设置边线与元素之间的偏移，outline-offset
• 如果元素被分割成多行绘制的话outline始终是绘制整个元素的外部轮廓，而border会绘制每一个区域的外部边框

outline 下的子属性相对border来说比较少，只有outline-width，outline-style，outline-color，和需要单独设置的outline-offset。

border类型

border 用于设置HTML元素的边界（描边），占据文档流空间，绘制位置受box-sizing影响。

border可以设置的属性非常多，应该是CSS中单类型样式属性最多的。大概可以分为border （常用），border-image，border-block，border-inline。

border

常用的描边样式，其下的子属性包括border-wdith，border-style，border-color。这三个子属性的作用和有效值和outline一样。

• border-width，描边的宽度，有效值为具体的数量值，单位可以是任何有效的CSS单位。不能取百分比值
• border-style，描边的样式，有效值为 none，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。个取值的效果如下图。
• border-color，描边的颜色，有效值为所有合法的CSS颜色值，包括rgba()

如下，border和outline的区别，很明显border是会占据文档流，撑开下方节点，而outline不会

如下，border-style的绘制效果。

这里最要讲none和hidden，两个都是不绘制出border，但是在表单中相连的两个单元格中设置为none会绘制出重叠的边框，而设置成hidden不会。

border还引申出可以单独设置某一条边框的子属性集分别为：

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

每条边同样可以单独设置-width,-style,-color等

border-image

我们常用的是用颜色填充的边框，border还可以用图片或者渐变色填充边框。这里用到的就是border-image。

border-image可以分成以下几个子属性。

• border-image-source
• border-image-slice
• border-image-outset
• border-image-repeat
• border-image-width

1、border-image-source

用于设置边框的图片路径或者是渐变样式。

2、border-iamge-slice

用法相对比较复杂。我们简单的可以理解为border-image生效之后，会用4条线将图片分割为9部分，然后将这9个区域的图片分别填充到border中对应的区域上，如下图所示。而border-image-slice就是用来控制这4条线距离边框边界的距离。

border-image-slice 的有效取值为

• border-image-slice : 20;// 四条线统一设置
• border-image-slice ：20 30;//分别设置水平线和垂直线
• border-image-slice ：20 10 30;//分别为上，水平，下线
• border-image-slice ：10 20 30 40;//分别为上，下，左，右线

border-image-slice 的属性值为非负浮点数不带单位或者为百分比值，同时还有一个特殊值fill用于设置上图的第"9"区域。该值可以设置在属性值中的任意位置，如果border-image-slice设置了该值，则第"9"区域会被添加到元素的对应位置中，相当于整个元素都会被边框图片填充，类似于设置了background-image。

3、border-image-repeat

用于设置每一个区域中，图片的填充方式。当我们将图片分区完之后，再将图片添加到border对应的区域中，有可能无法铺满border对应区域，这时用border-image-repeat来设置填充方式，有效的取值如下：

• stretch ：拉伸填充
• repeat ：平铺填充
• round ：平铺填充，整数填充，不能完全填充时会整体做一定比例拉伸至铺满
• space ：平铺填充，整数填充，不能完全填充时会留白

border-image-repeat 可以分别设置水平和垂直的填充方式，如border-image-repeat ：stretch space;

4、border-image-width

用于设置图片边框的高度。当border-image-width小于border-width时，只会在border外沿填充border-image-width大小，当border-image-width大于border-width会往元素内部填充。

5、border-image-outset

用于设置图片可以超出元素外框的大小，有效取值为非负浮点值，1为偏移100%，可以分别设置水平垂直或者上下左右各超出多少。

border-block 和 border-inline

接下来讲几个和border相关的新属性，border-block和border-inline。这两个样式目前还处在试验阶段，只有41版以上的火狐浏览器支持。但它们的衍生样式border-block-end等已经得到新版chrome，safari等浏览器的支持。

border-block 和 border-inline 绘制出来的边框线的位置取决于元素的书写水平或者垂直布局、文本书写的方向、文本水平溢出方向。在默认情况下各自的作用和各衍生样式的作用如下：

• border-block : 绘制两条垂直边线，类似border-top加上border-bottom。
• border-block-start ： 在垂直方向顶部绘制一条边线，类似于border-top。
• border-block-end ：在垂直方向的底部绘制一条边线，类似于border-bottom。
• border-inline-start : 类似于border-left。
• border-inline-end ：类似于border-right。

我们先以border-block-end 为例来看它们是如何绘制边线的。可以看出border-block-end会受writing-mode影响。而border-bottom固定绘制在底部。

再看一下border-inline-end。可以看出border-inline-end会受writing-mode和dirction影响。而border-right固定绘制在右边。

这几个新样式属性它们本身是border，每一个样式都可以更改它们的边线的大小（-widht），颜色（-color），样式（-style）。但它们有类似于文本中的对齐线（text-decoration）可以跟随文本方向所变化特性。可以用来绘制虚线的文本下划线。

相对来说border-block和border-inline更加语义化一些，也扩展了border的使用场景，使得样式效果看起来更加的符合逻辑，如下面这种情况，本来设置的是文本底部绘制描边，实际看起来像是在文本的右边绘制描边。

border-block和border-inline属于CSS逻辑属性（CSS logical properties），类似的属性还有margin-block，padding-block等等，有兴趣的可以自行谷歌。

完