CSS3的边框（二）

2019独角兽企业重金招聘Python工程师标准>>>

二、边框图片

边框图片border-image属性，是用来给元素边框添加背景图像，在某些时候，利用这个 border-image 可以轻松绘制一些比较复杂的小部件。border-image只是一个简写属性，，用于设置以下属性：

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

border-image-repeat 

Internet Explorer 不支持 border-image 属性。

border-image 属性规定了用作边框的图片。为了实现浏览器的兼容，在使用border-image属性时写法通常如下：

div

{

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */

-o-border-image:url(border.png) 30 30 round; /* Opera */

border-image:url(border.png) 30 30 round;

}

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

 

 

转载于:https://my.oschina.net/u/2971691/blog/865206