CSS 边框图片

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS border-image 属性

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。该属性有三部分：

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

我们将使用这幅图像（"border.png"）

border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

注意：为了使 border-image 起作用，该元素还需要设置 border 属性！

此处，重复图像的中间部分以创建边框：

图像作为边框！

这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/images/border.png) 30 round;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p>在这里，重复图像的中间部分，来创建边框：</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>这是原始图像：</p><img src="/images/border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

运行一下

此处，图像的中间部分被拉伸以创建边框：

图像作为边框！

这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/images/border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p>在这里，图像的中间部分被拉伸，来创建边框：</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>
<p>这是原始图像：</p><img src="/images/border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

运行一下

提示：border-image 属性实际上是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat的简写属性。

CSS border-image - 不同的裁切值

不同的裁切值会完全改变边框的外观：

实例 1：

border-image: url(border.png) 50 round;

实例 2：

border-image: url(border.png) 20% round;

实例 3：

border-image: url(border.png) 30% round;

这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/images/border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/images/border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/images/border.png) 30% round;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

运行一下

CSS 边框图像属性

属性	描述
border-image	用于设置所有 border-image-* 属性的简写属性。
border-image-source	规定用作边框的图像的路径。
border-image-slice	规定如何裁切边框图像。
border-image-width	规定边框图像的宽度。
border-image-outset	规定边框图像区域超出边框盒的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。

CSS 边框图片