CSS Border Image属性

CSS Border Image属性允许开发人员使用图像来自定义边框边缘的外观，而不必依赖于纯色边框。

语法

border-image: source slice width outset repeat;

其中：

• source：指定边框图像的URL或者是CSS线性渐变, 对径向渐变不起作用
• slice：一个 CSS 数值，指定边框图像中定义的内嵌边距
• width：指定使用的边框线的宽度
• outset：指定边框扩展到元素框外的量
• repeat：指定边框图像是否在边框区域内（stretch）、复制（repeat）或包含（round）。

例子

.example {
	border-image-source: url(border.png);
	border-image-slice: 10;
	border-image-outset: 20px;
	border-image-repeat: repeat;
	border-image-width: 10px;
}

上面的代码将为 .example 类应用一个边框图像。

兼容性：

CSS Border Image属性在所有现代浏览器中得到支持，包括 Chrome、Firefox、Safari、Opera 和 IE 11+。

注意：

如果给定了一个无效的值，整个属性将失效，并且边框将退回到默认的基于样式值的边框。一个无效的值不会干扰其他值。