border-image，边框图⽚效果详解border-image            设置边框图⽚的效果
border-image-source          //引⼊背景图⽚地址
border-image-slice          //切割引⼊的背景图⽚，只需要写数值，不需要带单位
border-image-width          //边框背景图⽚的宽度
//如果你设置了边框的宽度border-width，图像会偏移；
//但是设置边框背景图⽚的宽度，图像就不会偏移。
border-image-repeat          //边框背景图⽚的排列⽅式
border-image-outset          //边框背景向外扩张
border-image-slice最多可以设四个值，对应的是裁取border-image-source所引⼊图⽚的
四个⾓的⼤⼩。
eg.div{
border-image-source:url(……);
border-image-width:27px;
border-image-slice:27;
}
上⾯这个⽰例中，border-image-slice：27；只会显⽰图⽚在边框位置的，图⽚在元素部分
是被镂空的，不显⽰。若你想显⽰图⽚在元素区域的内容，在在后⾯设置fill。
border-image-slice：0 fill；
注意：⼀、在当前⾕歌 55.0.2883.87 m 版本中，border-image-slice属性默认是带有fill关键字的。
⼆、在⾕歌浏览器中，border-image各⼦属性不能分开写，必须在⼀起写，且前⾯加上-webkit-前缀。
上⾯的实例中，边框图⽚是在border⾥⾯的，你可以设置⼀下border-image-outset，从⽽使
边框图⽚显⽰在边框位置。
若边框图⽚为九宫格格式，那么你可以设置border-image-width、border-image-slice、
border-image-outset为数值⼤⼩相同的值。
eg.div{
border-image-source:url();
border-image-width:27px;
border-image-slice:27;
border-image-outset:27px;
}
border-image-repeat    显⽰九宫格四个边的显⽰排列⽅式，有如下四个值：
1、stretch    指定以拉伸⽅式填充边框背景图，默认值
2、repeat    指定以平铺⽅式来填充边框背景图。当图⽚碰到边界时，如果超过则被截断。
3、round      指定以平铺⽅式来填充边框背景图。图⽚会根据边框的尺⼨动态调整图⽚的
⼤⼩，直⾄正好可以铺满整个边框。（常⽤）
4、space      指定以平铺⽅式来填充边框背景图。图⽚会根据边框的尺⼨动态调整图⽚之
间的间距，直⾄正好可以铺满整个边框。（浏览器暂不⽀持）
边框图⽚，除了使⽤九宫格以外，还可以使⽤⾮九宫格的图⽚，⽐如⼀个按钮图⽚，同样是
border-image-source将图⽚引进来，然后设置border-image-width，并⽤border-image-slice
截取合适的图⽚边⾓。
我们可以使⽤border-image的简写形式，各属性书写顺序如下所⽰：
div border属性
border-image：(border-image-source) (border-image-slice/border-image-width/
border-image-outset) (border-image-repeat)
eg.div{
border-image:url() 27/27px/27px round;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。