CSS属性——border-image

·  阅读 311

border-image 就是给元素边框添加背景图片,是一个简写属性:

描述默认值
border-image-source用在边框的图片的路径。none
border-image-slice图片边框向内偏移。100%
border-image-width图片边框的宽度。1
border-image-outset边框图像区域超出边框的量。0
border-image-repeat图像边框平铺或者拉伸展示。stretch

border-image 是通过展示成图片来代替 border-style 的样式,所以 border-style 设置成为 none,border-image 也不会展示出来。

border-image-source

border-image-source: none|image;
复制代码

这个属性也就不用多说了,就是配置背景图的地址,默认为 none 就是没有任何效果。

border-image-slice

border-image-slice: number|%|fill;
复制代码

这个就是我们用到的关键属性,可以设置为数值或者百分比,数值就是指的像素,百分比就是占比图片位置,图像宽度就影响水平偏移,高度就影响垂直偏移,但是不能使用 px、em 这种单位。

该属性的作用也很明显,就是做切割,规定图像的上、右、下、左侧边缘的向内偏移,把图像分割,指定的四个值把背景图分割成九宫格。当然,可以使用 1-4 个值,代表意义和 margin、padding 这种一样,一个值就代表全部,两个值就代表上下和左右,三个就是代表上、左右、下。

这个 fill 值是代表是否保留边框图像的中间部分。

从下图可以看出先是从顶部切割,然后从右侧切割,接着在底部切割,最后在左侧切割,形成了 9 块区域,也就是九宫格。

5.png

可以设置不一样的数值来看下切分位置。

border-image-slice: 30% 35% 40% 25%;
复制代码

从代码和效果来看下带 fill 的展示:

border-image-source: url(circle-point.png);
border-image-slice: 33.34% fill;
复制代码
border-image-source: url(circle-point.png);
border-image-slice: 33.34%;
复制代码

fill.png

border-image-width

border-image-width: length|number|%|auto;
复制代码

就是字面意思,设置边框图片宽度的,默认值为 1,就是和 border-width 保持一致。那如果我们单独去设置这个属性,就可以自由决定图片边框宽度,也不会影响到元素结构。

这个属性就可以使用 px、em 这样的单位,同样可以设置 1-4 个值。

3.png

border-image-outset

border-image-outset: length|number;
复制代码

该属性是让边框背景延伸到盒子外。

简单说就是修改背景边框位置却不影响 dom 结构,可以设置多个值,和 margin、padding 使用一样。除了可以使用 px、em 这样的单位,也可以只是用数值,代表的是 border-width 的倍数。

下图是设置为1倍时的效果:

4.png

border-image-repeat

border-image-repeat: stretch|repeat|round|space;
复制代码

该属性是设置 border-image 的平铺方式,可以接收 1-2 个参数,没有设置就是使用默认值 stretch,如果使用两个,第一个指定的是水平方向的,第二个指定的是垂直方向的,border-image-slice 设置有 fill,那也可以看到中间区域也会受到这两个参数影响。

10.png

从效果图可以看出,repeat、round、space 三个都是平铺效果,stretch 是拉伸效果。

repeat 的平铺是不进行拉伸,就是把边框空隙填满。

round 会对图像进行缩放来完整展示,就是会进行一定的拉伸。

space 是根据边框尺寸动态调整图片间距来平铺的。

从下面的效果图可以明显看出彼此的差异。

9.png

分类:
前端
标签:
分类:
前端
标签: