如何使用纯CSS添加边框图像和渐变边框

介绍

您可能在您的项目中使用过 CSS 边框。这允许您设置 border-style、border-color 和 border-width。现在，现代网络浏览器允许您使用边框图像和渐变边框。

在本文中，您将探索 border-image-source 和 border-image-slice。

先决条件

如果您想继续阅读本文，您将需要：

需要对 CSS 有一定的了解。如果您需要复习，您可以从如何使用 CSS 构建网站教程系列中受益。
支持 [X35X]、linear-gradient、radial-gradient 和 conic-gradient 的现代 Web 浏览器。

设置示例

首先，考虑一个 box 类，它建立一些维度并使内容居中：

.box {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

接下来，在 div 元素中使用此类：

<div class="box">
  Example box without a border.
</div>

现在，您可以创建一个新的 with-border 类：

.with-border {
  border-color: black;
  border-style: solid;
  border-width: 30px;
}

然后，将其添加到标记中：

<div class="box with-border">
  Example box with a border.
</div>

此代码将呈现以下内容：

带边框的示例框。

接下来，您将在此示例的基础上使用边框图像和渐变边框。

使用边框图像

首先，新建一个 with-border-image 类：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

您会注意到仍然需要为元素应用常规边框，因为边框图像替换了常规边框样式。

border-image-source 指定源图像，它可以是光栅或基于矢量的图像 (SVG) 的 URL 或数据 URI。

border-image-slice 是指将图像分成九个区域的切片过程。通过定义最多四个值，您可以指定图像的哪一部分将作为边框的一部分重复。

然后，将其添加到标记中：

<div class="box with-border-image">
  Example box with a border image.
</div>

此代码将呈现以下内容：

带有边框图像的示例框。

如果您想冒险全面了解 border-image-slice，这里是 Codrops 的一篇很好的参考文章和 CSS-Tricks 的另一篇文章。

使用速记属性

有一个简写属性可以同时指定 border-image-source 和 border-image-slice 的值：border-image。

回想一下前面的示例如何使用单独的属性：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

这是用速记属性重写的相同示例：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image: url(/url/to/some/fancy/image.jpg) 60 30;
}

这些值是等效的。

使用渐变边框

支持三种类型的渐变：线性、径向和圆锥。对于渐变，您需要指定 1 的 border-image-slice 值。

使用线性渐变

这是一个线性渐变：

.with-linear-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}

将此添加到您的标记中。此代码将呈现以下内容：

具有线性渐变的示例框。

你现在有了一个使用 linear-gradient 的线性渐变元素。

使用径向渐变

这是径向渐变的示例：

.with-radial-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

将此添加到您的标记中。此代码将呈现以下内容：

具有径向渐变的示例框。

你现在有了一个使用 radial-gradient 的线性渐变元素。

使用圆锥渐变

以下是圆锥渐变的示例：

.with-conic-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}

将此添加到您的标记中。此代码将呈现以下内容：

具有圆锥渐变的示例框。

你现在有了一个使用 conic-gradient 的线性渐变元素。

结论

在本文中，您探索了 border-image-source 和 border-image-slice。

截至 2020 年，Can I Use border-image? 显示全球 99% of 个支持 border-image 属性的浏览器。采用新功能时，请考虑目标受众的浏览器使用情况。

不幸的是，border-image 还不能像预期的那样与 border-radius 一起工作。如果您希望您的元素具有边框半径和渐变边框，您可能会对这些方法感兴趣，这些方法使用带有背景图像和背景颜色的嵌套元素来产生渐变边框图像的错觉[X236X ]。

如果您想了解有关 CSS 的更多信息，请查看我们的 CSS 主题页面以获取练习和编程项目。