CSS border-image 属性

此 CSS 属性定义用于元素边框的图像。它会在元素外部绘制图像，并用相应的图像替换元素的边框。用图像替换元素的边框是一个有趣的任务。

当 border-collapse 设置为 collapse 时，border-image 属性可应用于除内部表格元素（如 tr、th、td）之外的所有元素。

它是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 的简写属性。我们可以使用 border-image 属性一次设置所有这些属性。如果任何值未指定，则它们将设置为其默认值。此属性的默认值是

语法

该属性的值列表如下。

现在，让我们看一些示例，以了解如何使用 border-image 属性设置边框图像。

示例

在此示例中，我们用图像替换了段落元素的边框。在第一个段落中，我们为 border-image-repeat 属性指定了单个值（即 round），而在第二个段落中，我们为其指定了两个值（round, stretch），第一个值用于水平边，第二个值用于垂直边。

输出

我们还可以将渐变指定为边框图像。

示例 - 使用 linear-gradient

在此示例中，我们将 linear-gradient 和 repeating-linear-gradient 用作段落元素的边框图像。

输出

示例 - 使用 radial-gradient

在此示例中，我们将 radial-gradient 用作段落元素的边框图像。

输出