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%;
}

效果图：