图片边框border-image可以在边框位置设置图片(IE10-不支持)
border-image: none(默认)
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
[注意]该属性的作用是用来替代border-style的，若border-image为none，则显示border-style的值
border-image: url('img.img') 27 fill / 27 / 27px repeat;
【border-image-source】
边框的图片路径
border-image-source:url('test.img');
【border-image-slice】
图片边框四条切割线的位置
border-image-slice: <number> | <percentage> fill
使用border-image-slice时，有如下几点注意事项：
1、若不写单位，具体值默认单位是px
2、fill表示图片边框的中间部分将保留下来
3、四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽
4、图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内
5、若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片
6、若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空
【border-image-width】
边框宽度border-image-width。若指定该值，则边框图片宽度由该值确定，否则由盒子的边框宽度来确定。该值可以用具体像素、数字(表示几倍)以及百分比来表示，遵循四值顺序
border-image-width: <length> | <percentage> | <number> | auto
【border-image-outset】
border-image-outset表示边框图像区域超出边框的量，可以用具体像素和数字(表示几倍)表示，遵循四值顺序
border-image-outset:0(默认)
border-image-outset: <length> | <number>
【border-image-repeat】
边框图片的排列方式
border-image-repeat: stretch(拉伸,默认) | repeat(重复) | round(平铺) [1,2]
//第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式
在上面的属性值中，repeat是边框中间向两端平铺，可能造成两端边缘被切的现象；而round会对边框背景图的切片进行缩放，使其正好显示
【按钮实现】
div{
display: inline-block;
border-image: url('button.png') 16 fill/ auto / 5px;
}
原文链接：https://www.qiquanji.com/post/8724.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知