CSS 边框图像 详解
css3基础 2022-05-23 12:07:01小码哥的IT人生shichen
CSS 边框图像
CSS 边框图像
通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。
CSS border-image 属性
CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。
该属性有三部分：
- 用作边框的图像
- 在哪里裁切图像
- 定义中间部分应重复还是拉伸
我们将使用这幅图像（"border.png"）
border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。
注意：为了使 border-image 起作用，该元素还需要设置 border 属性！
此处，重复图像的中间部分以创建边框：
图像作为边框！
这是代码：
示例代码：
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(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="border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
此处，图像的中间部分被拉伸以创建边框：
图像作为边框！
这是代码：
示例代码：
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(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="border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：border-image 属性实际上是以下属性的简写属性：
border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-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;
这是代码：
示例代码：
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 边框图像属性
| 属性 | 描述 |
|---|---|
| border-image | 用于设置所有 border-image-* 属性的简写属性。 |
| border-image-source | 规定用作边框的图像的路径。 |
| border-image-slice | 规定如何裁切边框图像。 |
| border-image-width | 规定边框图像的宽度。 |
| border-image-outset | 规定边框图像区域超出边框盒的量。 |
| border-image-repeat | 规定边框图像应重复、圆角、还是拉伸。 |
