了解边框图像

新的 CSS3 属性 border-image 有点棘手，但它允许您使用单个 div 和单个图像创建具有自定义边框（或阴影，如果您需要）的灵活框。 在本文中，我解释了border-image简写属性在当今浏览器中的工作原理。

基本思路

border-image 简写属性包含 3 部分

border-image: url(border-image.png) 25% repeat;

本质上，这些允许您指定

1. 用作边框的图像
2. 将图像切片的位置，将图像划分为 9 个部分
3. 浏览器应如何将这些部分应用于元素的边缘

相关细节

让我们更详细地看一下流程的每个部分。 第一部分很容易，并且来自background-image属性。 出于演示目的，我将使用此图像，其尺寸为 100px x 100px

切片您的图像

第二部分可以包含一个到四个值，类似于border-width属性，它们按相同顺序指定：上、右、下、左。 您可以使用百分比或像素。 奇怪的是，百分比需要“%”，而像素应该不带“px”

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

在这种情况下，由于我的图像尺寸为 100px x 100px，因此上面的两条规则是等效的——它们在相同位置切片图像。 我在我的图像上添加了一些尺寸以进行演示

重复、圆形、拉伸

border-image 始终将图像的角部分放置在元素框的对应角，但简写规则的第三部分告诉浏览器如何处理图像的中间部分——即沿着元素边缘的部分。

Repeat（重复或平铺图像）和stretch（拉伸或缩放图像）是相当直观的。

Round 表示平铺图像，但仅平铺到适合整数个平铺，否则缩放图像。 现在，Safari 和 Chrome 将 round 解释为 repeat。 最多可以有两个值：一个用于元素的顶部和底部边缘，一个用于左右边缘。

以下是一个示例，其中顶部/底部值设置为 repeat，而左/右值设置为 stretch

#example-one {
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}

边框宽度

如果您没有为边框指定宽度，border-image 不会执行任何操作。 对于理解border-image的浏览器，您的图像切片将按指定宽度进行缩放。 如果您使用border简写属性，它为不支持

#example-two {
  border: 50px double orange;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

或者，您可以分别指定每个宽度（在此示例中，我指定了宽度，这样图像切片就不会进行缩放）

#example-three {
  border-color: orange;
  border-style: double;
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

但是，使用与边框图像具有相同宽度的普通边框并不总是理想的，因此您可能希望使用条件样式表为 IE 提供完全不同的边框样式。

浏览器怪癖

可以预见的是，IE 不理解任何内容border-image。 支持 border-image 的浏览器仅支持简写属性，而不支持所有规范中描述的单个属性。 一些可能非常有用的属性根本不受支持，尤其是border-image-outset，它将解决这个问题。

此外，默认行为应该是丢弃图像的中心部分，并在border-image-slice属性上使用“fill”关键字来保留它

如果存在 fill 关键字，则会导致边框图像的中间部分被保留。（默认情况下，它会被丢弃，即被视为为空。） (阅读规范)

但是，当前的浏览器行为是保留中间部分，并且没有办法将其关闭。 因此，如果您不希望元素的内容区域具有背景，则图像的中心部分必须为空。 但是，您可以利用这种填充行为，仅使用一个图像来创建 具有精美边框和背景的框。

交互式演示

我构建了一个 border-image 演示页面，帮助我了解这套复杂的 CSS3 属性。 您可以选择图像，指定重复、圆形或拉伸，并调整边框宽度和切片。 尽情享受吧！

实际示例

• Chris Spooner 使用它来很好地效果地为图像提供自定义边框。
• 在我最近构建的旅行博客 Go Pink Boots (更新：现在已离线) 上，我使用它为图像添加了撕裂的纸张背景。
• 我在我的网站 The Web Designers’ Review of Books (更新：现在已离线) 上使用它来突出显示块引用。

如果您在实时网站上还有其他示例，我很乐意看到它们。 在评论中留下链接！