border-image-source

版本：CSS3

CSS属性border-image-source用于声明元素的边框图片（border-image）的资源。属性border-image-slice被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片。

示例

/* no border-image, use the specified border-style */
border-image-source: none;

/* the image.jpg is used as image */
border-image-source: url(image.jpg);

/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);

/* global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

浏览器支持

IE11以上版本的浏览器都支持border-image-source

语法

border-image-source:none| <image>| <linear-gradient>

取值

• none：无背景图片。
• <image>：指定图片资源。参见<image>。
• <linear-gradient>：使用颜色渐变来是实现效果。参见linear-gradient()。

实例

p{
	border:15pxsolid;
	padding:30px;
	width:100px;
	border-image-source:url(images/kuang.jpg);
	border-image-repeat:repeat;
	border-image-slice:26%26%;
}

效果图：