用CSS边框图像装饰网络

以前，为网页添加装饰性元素（如花哨的边框）需要切片图像，并耐心调整 CSS 代码，直到效果满意为止。

现在，CSS 简化了这一过程。只需几行代码，即可为您的网站添加相当复杂的边框。本文将向您展示如何做到这一点。

要点

• CSS 允许仅用几行代码即可为网页添加复杂的边框，包括使用 border-image-source 属性在边框上添加背景图像。
• border-image-slice 属性将选定的图像应用于边框，将图像分成九个区域：四个角、四个边和一个中间区域，可以选择为偏移量指定一个到四个数字或百分比值。
• border-image-width 属性设计边框图像区域内的内部偏移量，而 border-image-outset 属性允许将边框图像区域推到边框框之外。
• 可以使用简写 border 属性重置 border-image 属性，该属性可以快速重置元素所有四个边框的宽度、颜色和样式。在撰写本文时，border-image 在所有主要浏览器中几乎都得到了完全支持。

边框图像属性

一种常见的边框样式设置方法是使用预设的 border-style 规则。这些规则包括：dotted、dashed、solid、double、groove、ridge、inset 和 outset。

这些样式已经提供了相当多的选择。但是，您可以更进一步，使用以下 CSS 属性为边框添加吸引人的背景图像。

border-image-source 属性

使用此属性，您可以为元素的边框分配背景图像。该值通常是图像的 URL：

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

您会发现 CSS 渐变效果也一样好：

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

在浏览器中，它看起来像这样：

如果您将此属性设置为 none 值，或者无法显示图像，浏览器将使用为 border-style 属性设置的值。因此，最好使用 border-style 作为后备方案。

您使用的图像不需要与边框的宽度和高度匹配。CSS 边框图像的美妙之处在于，您只需要一个小图像即可装饰任何宽度和高度的元素边框，包括自适应不同屏幕尺寸的元素。

border-image-slice 属性

使用 border-image-source 属性选择图像后，您可以使用 border-image-slice 属性将其应用于边框。

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

让我们更详细地了解一下。此属性设计来自顶部、右侧、底部和左侧的内部偏移量。这些偏移量最终会将您的小型图像切成九个区域：四个角、四个边和一个中间区域。

您可以指定一个到四个数字或百分比值。当您指定四个值时，它们将应用于顶部、右侧、底部和左侧偏移量。如果您跳过左侧偏移量，则这将与右侧相同。如果您错过了底部偏移量，则这将与顶部相同。省略右侧偏移量的值将使其与顶部相同。如果您只使用一个值，它将用于所有四个偏移量。

百分比值指的是图像大小的百分比——水平偏移量的图像宽度和垂直偏移量的图像高度。

数字代表图像中的像素，或者在矢量图像的情况下代表坐标。还有一点，不要在数字后面添加 px，这样做不起作用！

以下是您可以使用 border-image-slice 的方法：

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

<code class="language-css">element {
  border-image-slice: 19;
}</code>

使用大小为 100 x 100 像素的图像作为边框，其外观如下：

最终效果如下：

中间区域呈现为完全透明，因此不可见。如果您想使其可见，请添加 fill 关键字。

例如，使用中间区域完全不透明的图像，不添加 fill 关键字，将与上面的示例完全相同。但是，请按如下方式应用 fill 关键字：

<code class="language-html"><div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div></code>

使用中间区域包含细节的图像：

然后，我们会发现图像的中间区域在页面上完全可见，尽管有点模糊和压缩：

border-image-width 属性

此属性绘制在所谓的边框图像区域内。默认情况下，此区域的边界是边框框的边界。与 border-image-slice 属性一样，border-image-width 设计内部偏移量，将图像分成九个区域。

此属性接受一个到四个值（顶部、右侧、底部、左侧），可以使用数字或百分比。百分比相对于边框图像区域的大小，即水平偏移量的区域宽度和垂直偏移量的区域高度。如果您使用没有 px 单位的数字，则这些数字将等于相应的计算边框宽度的倍数。例如，下面的代码：

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

……将边框图像的宽度设置为边框宽度值的 3 倍，即 19 像素。结果如下所示：

我发现，为 border-image-width 和 border-image-slice 属性赋予相同的值可以确保您的边框图像以最佳状态显示，而不会出现不需要的变形。

border-image-outset 属性

到目前为止，我使用的所有属性都默认为内嵌边框图像区域。但是，您可以选择将边框图像区域推到边框框之外。您可以使用 border-image-outset 属性来实现。

此属性采用一个到四个值（顶部、右侧、底部、左侧），以数字或长度单位（如 px、em 等）表示。如果您使用数字，则结果将是边框图像被推到边框框之外，其倍数为计算的边框宽度。

为了进一步说明，我绘制了一个绿色的虚线轮廓来表示边框框。边框图像区域包含一个粉红色的边框图像。在其默认的内嵌状态下，边框图像位于绿色轮廓内。这意味着边框图像区域位于边框框内。

将 border-image-outset: 19px; 添加到 CSS 规则集中，会将粉红色的边框图像推到虚线绿色轮廓之外。这表示边框图像区域绘制在边框框之外：

请注意，位于边框框之外的边框图像部分不会触发滚动，也不会捕获鼠标事件。

border-image-repeat 属性

此属性提供了一些关于如何在边框的侧面和中间部分缩放和平铺图像切片的选择。第一个值应用于水平侧（顶部和底部），第二个值应用于垂直侧（右侧和左侧）。如果您只设置一个值，则该值将应用于水平和垂直两侧。

可用值包括：

• stretch – 如果您不使用 border-image-repeat 属性，则为默认值。此关键字会拉伸图像以填充可用区域。
• repeat – 图像平铺重复以填充可用区域。如果可用区域不能被平铺宽度整除，则图像可能会被切断。
• round – 与 repeat 相同，但是如果空间不足以容纳平铺，则会缩放平铺直到它们都适合。这确保了平铺永远不会被切断，但图像可能会看起来有点压缩。
• space – 与 repeat 相同，但是如果空间不是平铺宽度的精确倍数，则额外的空白将均匀分布在每个平铺周围。

在撰写本文时，Firefox 似乎将 space 呈现为与 stretch 相同，而 Chrome 则将 space 呈现为与 repeat 相同。

border-image 简写属性

您可以将上面讨论的所有单个属性压缩到 border-image 简写属性中，如下所示：

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

以下是代码片段：

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

如果要删除边框图像怎么办？

重置边框的最佳方法是使用简写 border 属性。使用 border，您可以快速重置元素所有四个边框的相同宽度、颜色和样式。无需指定 border-image: none 规则，也不需要覆盖任何单个 border-image 属性。

浏览器支持

在撰写本文时，border-image 在所有主要浏览器中几乎都得到了完全支持。只有 Firefox 无法跨元素拉伸 SVG 图像，Opera Mini 支持带有 -o- 前缀的简写语法，但不支持单个属性。

结论

本文主要介绍了 border-image 属性：它接受的值、最佳使用方法以及在撰写本文时的浏览器支持级别。

您可以在 CSS 背景和边框级别 3 规范文档中找到更多详细信息。

如果您在项目中使用了 border-image 属性，为什么不与社区分享最终结果呢？

期待您的回复！

关于使用 CSS 边框图像装饰网页的常见问题解答 (FAQ)

如何创建 CSS 边框图像？

创建 CSS 边框图像涉及使用 border-image 属性。此属性允许您指定用作元素周围边框的图像。此属性的语法如下：

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

source 是您要使用的图像的 URL。slice 定义图像的内侧偏移量。width 设置边框的宽度。outset 确定边框图像区域超出边框框的距离。repeat 指定图像的平铺或重复方式。

CSS 中有哪些不同的边框样式？

CSS 提供了几种边框样式，您可以使用它们来自定义网页元素的外观。这些包括：none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。每种样式都会产生不同的视觉效果。例如，dotted 会创建一个带有系列点的边框，而 double 会创建一个双线边框。

如何使用 CSS 创建内嵌边框？

可以使用 inset 边框样式在 CSS 中创建内嵌边框。此样式使框看起来像是嵌入在页面中的。其语法如下：

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

我可以为元素的不同侧使用不同的边框样式吗？

可以，CSS 允许您将不同的边框样式应用于元素的不同侧。您可以使用 border-top-style、border-right-style、border-bottom-style 和 border-left-style 属性分别指定每侧的样式。

如何控制 CSS 边框图像的大小？

可以使用 border-image-width 属性控制 CSS 边框图像的大小。此属性通过定义边框区域的大小来设置边框图像的宽度。您可以以像素为单位指定宽度，也可以将其指定为元素框的百分比。

我可以将渐变图像用作 CSS 中的边框吗？

可以，CSS 允许您将渐变图像用作边框。您可以使用 linear-gradient 函数创建渐变图像，然后使用 border-image 属性将其用作边框图像。

如何使我的 CSS 边框图像重复？

CSS 中的 border-image-repeat 属性控制边框图像的重复方式。可能的值为 stretch（默认值）、repeat、round 和 space。stretch 将图像缩放以填充区域。repeat 平铺图像。round 平铺图像，但将其缩放以精确匹配。space 平铺图像，但在平铺之间留有空间。

CSS 中的 border 属性和 border-image 属性有什么区别？

CSS 中的 border 属性用于设置元素边框的样式、宽度和颜色。另一方面，border-image 属性允许您使用图像作为元素周围的边框。

我可以将 CSS 边框图像与圆角一起使用吗？

可以，您可以将 CSS 边框图像与圆角一起使用。您可以使用 border-radius 属性创建圆角，然后使用 border-image 属性应用边框图像。

如何在 CSS 中创建虚线边框？

可以使用 dashed 边框样式在 CSS 中创建虚线边框。其语法如下：

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

这将创建一个带有系列短线或虚线的边框。

以上是用CSS边框图像装饰网络的详细内容。更多信息请关注PHP中文网其他相关文章！