CSS 基础教程：边框（二）
hudson 译 原文
边框和内联元素
边框可以以同样的方式应用于任何内联元素。边框的厚度不会对元素的行高产生影响。如果在内联元素中指定了左右边框，则会使文本围绕边框排列。
语法：
strong {border-top: thin solid green; border-bottom: 5px dotted #ff00ff;}
上述代码将在段落中的加粗文本上应用边框，顶部为绿色、实线细边框，底部为品红色、5像素虚线边框。
让我们看一个示例：
strong {border-top: thick solid green; border-bottom: 5px dashed #ff00ff; background-color: silver;}Check the inline elements with borders and rest has no border.
替换元素
对于替换元素，如图像，应用边框会影响行高。
语法：
img {border: 2em solid #ff00ff;}
上述代码将在图像周围应用2em宽的实线、品红色边框。
让我们看一个示例：
img {border: 1em solid #ff00ff;}Check the logo
with borders altering the line height.
图像
为了使边框更加复杂和有趣，可以将图像添加为元素的边框。为此，需要使用属性border-image-source为图像提供源。
需要记住的要点：
- 在提供图像源之前先声明border-style，否则不会显示图像作为边框。
- 如果未指定border-width，则默认为medium，即大约3像素。
border-image-source
此属性指定边框的图像的来源。
语法：
border: 10px solid; border-image-source: url('URL');
border-image-slice
使用属性border-image-source指定的图像可以使用属性border-image-slice进行切片。
正如名称所示，此属性用于切割图像。它将图像分成9个区域，其中有4个角、4个边缘和一个中间区域。
以下图表演示了border-image-slice属性的功能：

注意：可以使用百分比和长度单位来提供border-image-slice的偏移量，但是强烈推荐使用百分比。
参考以下语法示例：
border: 20px solid;
border-image-source: url('URL');
border-image-slice: 25%;
border-image-width
要指定要设置为边框的图像的宽度，可以使用属性border-image-width。
语法:
border: 20px solid;
border-image-source: url('URL');
border-image-width: 15px;
border-image-slice: 33.33%;
border-image-outset
为了避免图像边框和内容的重叠，可以使用属性border-image-outset。
此属性将边框图像推到边框框外。
语法
border: 20px solid;
padding: 1em;
border-image-source: url('URL');
border-image-width: 1;
border-image-slice: 10;
border-image-outset: 8px;
border-image-repeat
默认情况下，边框图像沿边拉伸，但是可以使用属性border-image-repeat进行更改。
此属性沿边重复指定的图像，直到填满整个长度和宽度。
语法:
border: 20px solid;
padding: 1em;
border-image-source: url('URL');
border-image-repeat: repeat;
除了stretch和repeat外，此属性还可以接受round的值。
边框图像 - 简写
为了简洁起见，有一个设置边框图像的简写方式，即border-image。传递给border-image的值使用斜杠（/）符号分隔。值应按特定顺序列出，即切片、宽度，最后是偏移量。
语法:
border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;
注意：
border-image还可以使用仅一个值（即URL）声明 ，其余值将为默认值。
让我们看一个示例：
边框相关属性
所有与边框相关的属性列在下表中：
| 属性 | 描述 |
|---|---|
| border | 简写属性,可以在一个声明中设置所有边框属性 |
| border-bottom | 设置底部边框的简写属性 |
| border-bottom-color | 设置底部边框颜色的简写属性 |
| border-bottom-width | 设置底部边框宽度的简写属性 |
| border-bottom-style | 设置底部边框样式的简写属性 |
| border-color | 设置边框颜色的简写属性 |
| border-left | 设置左边框的简写属性 |
| border-left-color | 设置左边框颜色的简写属性 |
| border-left-width | 设置左边框宽度的简写属性 |
| border-left-style | 设置左边框样式的简写属性 |
| border-right | 设置右边框的简写属性 |
| border-right-color | 设置右边框颜色的简写属性 |
| border-right-width | 设置右边框宽度的简写属性 |
| border-right-style | 设置右边框样式的简写属性 |
| border-style | 设置边框样式的简写属性 |
| border-top | 设置顶部边框的简写属性 |
| border-top-color | 设置顶部边框颜色的简写属性 |
| border-top-width | 设置顶部边框宽度的简写属性 |
| border-top-style | 设置顶部边框样式的简写属性 |
| border-width | 设置边框宽度的简写属性 |
| border-image | 设置边框图像的简写属性 |
| border-image-outset | 设置图像外边距，即边框图像区域扩展的距离 |
| border-image-repeat | 此属性确定是否应重复、圆角、间隔或拉伸边框图像 |
| border-image-source | 设置边框的图像的源 |
| border-image-slice | 此属设置如何在边框中切割图像 |
| border-image-width | 设置边框图像的宽度 |
这是一个从 https://juejin.cn/post/7368637177428066304 下的原始话题分离的讨论话题