肉渣教程

CSS 边框图片

上一节 下一节
通过CSS中的border-image属性,可以自定义图片作为元素的边框。

CSS border-image属性

在CSS中border-image属性可用来自定义图片作为元素的边框。该属性要声明如下三部分:

  1. 用来作为边框的图片(源图片)
  2. 从哪里开始剪切这张图片(根据此值将图片切成9部分,可以是具体像素值,也可以是百分比;备注:使用具体像素值的时候,不用加单位,直接用纯数字即可)
  3. 定义中间剪切部分是重复(round)还是拉伸(stretch)

下方图片为自定义边框图片的源图:

border-image属性的作用原理:以第一个取值设置边框源图片,根据第二个取值是把上述图片剪切为9部分,就像一个井字格一样。然后每边中间部分则会根据该属性第三个取值设置而拉伸或者重复,round代表重复,stretch代表拉伸

下图是模拟将源图切割成九块的原理:

border-image属性的第二个值是用来设置如何切割的,其可以为具体像素的数值,也可以使用百分比;这个值就是上面示意图中黄绿色透明色部分(正方形)的边长,就是上面红色线条的那块;通过控制这个数值,就可以决定是如何切割成九部分的;而上图中粉红色透明的部分,就是重复或者拉伸的部分。


要想使border-image属性生效,千万别忘了设置border属性。具体的看下面的案例吧。


案例1 重复(round)

border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 round;
#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 round;
}

运行一下


案例2 拉升(stretch)

border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 stretch;
#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 stretch;
}

运行一下


案例3 其他的切割尺寸

border-image: url(https://logo.zhuanfou.com/ex_border.png) 12 stretch;

运行一下


案例4 其他的切割尺寸

border-image: url(https://logo.zhuanfou.com/ex_border.png) 25% round;

运行一下


案例5 其他的切割尺寸

border-image: url(https://logo.zhuanfou.com/ex_border.png) 49% round;

运行一下


CSS 边框图片

上一节 下一节