CSS border-image 属性

CSS border-image 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

实例

将图片规定为包围 div 元素的边框：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/images/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(/images/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/images/border.png) 30 30 round;        /* Opera */
border-image:url(/images/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/images/border.png) 30 30 stretch;    /* Old Firefox */
-webkit-border-image:url(/images/border.png) 30 30 stretch;    /* Safari and Chrome */
-o-border-image:url(/images/border.png) 30 30 stretch;    /* Opera */
border-image:url(/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/images/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

运行一下

页面底部有更多实例。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
border-image	16.04.0 -webkit-	11.0	15.03.5 -moz-	6.03.1 -webkit-	15.011.0 -o-

定义和用法

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

特别注意，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none 100% 1 0 stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImage="url(border.png) 30 30 round"

可能的值

值	描述	测试
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	测试

CSS border-image 属性

实例

浏览器支持

定义和用法

可能的值

相关页面

分类导航