border-image图片边框的实现详解

图片边框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,我们将及时处理。

微信扫码关注

更新实时通知