简介
您可能已经在项目中使用了css borders。这允许您设置edge-style、edge-Color和edge-width。现在，现代网络浏览器允许您使用边框图像和渐变边框。
在本文中，您将探索border-image-source和border-image-slice。
预约
如果您想继续阅读本文，您将需要：
- 需要对CSS有一定的了解。如果您需要复习，您可以从如何使用CSS构建网站》教程系列中获益。
- 支持
边框图像、线性梯度、径向梯度、二次曲线梯度的现代Web浏览器。
设置示例
首先，考虑一个box类，它建立了一些维度并使内容居中：
1.box {
2 width: 400px;
3 height: 200px;
4 max-width: 100%;
5 margin: 1rem auto;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 font-size: 2rem;
10}
接下来，在div元素中使用此类：
1<div class="box">
2 Example box without a border.
3</div>
现在，您可以创建新的with-border类：
1.with-border {
2 border-color: black;
3 border-style: solid;
4 border-width: 30px;
5}
然后，将其添加到标记中：
1<div class="box with-border">
2 Example box with a border.
3</div>
这段代码将呈现以下内容：
接下来，您将使用边框图像和渐变边框构建此示例。
使用边框图片
首先，创建一个新的with-edge-Image类：
1.with-border-image {
2 border-style: solid;
3 border-width: 20px;
4 border-image-source: url(/url/to/some/fancy/image.jpg);
5 border-image-slice: 60 30;
6}
您将注意到，仍然需要将常规边框应用于元素，因为边框图像替换了常规边框样式。
Borde-Image-Source指定源图片，可以是栅格或矢量化图片(SVG)的URL，也可以是数据URI。
BORDER-IMAGE-SLICE是将一张图片分成九个区域的切片过程。通过定义最多四个值，您可以指定图像的哪一部分将作为边框的一部分重复。
然后，将其添加到标记中：
1<div class="box with-border-image">
2 Example box with a border image.
3</div>
这段代码将呈现以下内容：
如果你想冒险完全理解`边框图像-切片‘，这里有一个很好的参考资料articleby Codrops和另一个articleby css-Tricks]。
使用速记属性
有一个速记属性可以同时指定edge-Image-ource和edge-Image-slice的值：edge-Image。
回想上一个示例是如何使用单独的属性的：
1.with-border-image {
2 border-style: solid;
3 border-width: 20px;
4 border-image-source: url(/url/to/some/fancy/image.jpg);
5 border-image-slice: 60 30;
6}
这与使用速记属性重写的示例相同：
1.with-border-image {
2 border-style: solid;
3 border-width: 20px;
4 border-image: url(/url/to/some/fancy/image.jpg) 60 30;
5}
这些值是相等的。
使用渐变边框
支持三种类型的渐变：线性、径向和圆锥。对于渐变，您需要将edge-Image-slice的值指定为1。
使用线性渐变
下面是一个线性梯度：
1.with-linear-gradient {
2 border-style: solid;
3 border-width: 10px;
4 border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
5}
将此添加到您的标记中。此代码将呈现以下内容：
现在，您有了一个使用线性渐变的线性渐变元素。
使用径向渐变
以下是radial渐变的示例：
1.with-radial-gradient {
2 border-style: solid;
3 border-width: 10px;
4 border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
5}
将此添加到您的标记中。此代码将呈现以下内容：
现在，您有了一个使用Radial-gradient的线性渐变元素。
使用圆锥渐变
以下是conic渐变的示例：
1.with-conic-gradient {
2 border-style: solid;
3 border-width: 10px;
4 border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
5}
将此添加到您的标记中。此代码将呈现以下内容：
现在，您有了一个使用conic-gradient的线性渐变元素。
结论
在本文中，您研究了边界-图像-源和边界-图像-切片。
截至2020年，Can I Useborder-image？]显示，全球99%的浏览器支持BORDER-IMAGE属性。在采用新功能时，要考虑目标受众的浏览器使用情况。
不幸的是，对于‘边框半径’，‘边框图像’还不能像预期的那样工作。如果您希望您的元素具有边框半径和渐变边框，您可能会对[这些方法感兴趣，这些方法使用带有背景图像和背景颜色的嵌套元素来提供渐变背景的错觉
如果您想了解更多关于css的内容，请查看我们的css主题页面获取练习和编程项目。