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

一、border-image-source

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

二、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。

三、border-image-repeat

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

• stretch ：拉伸填充
• repeat ：平铺填充
• round ：平铺填充，整数填充，不能彻底填充时会总体作必定比例拉伸至铺满
• space ：平铺填充，整数填充，不能彻底填充时会留白

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

四、border-image-width

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

五、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等等，有兴趣的能够自行谷歌。

完