CSS 属性篇(十一)：border-image属性

时间 2019-11-26

标签 css 属性十一 border image 栏目 CSS 繁體版

原文原文链接

border-image 经过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)。html

一、图片资源(border-image-source)

border-image: none | <image>
复制代码

border-image的背景图使用url()调用，图片能够是相对路径或是绝对路径，也能够不使用图片，即border-image:none;
none 表示border-image不作任何效果，边框使用 border-style 指定的样式。chrome

二、图片剪裁位置(border-image-slice)

bordre-image-slice [<number> | <percentage>]{1,4} && fill?
复制代码

border-image-slice 从名字上看就很好理解：边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，以下： segmentfault

border-image-slice 四条线的值类型为：number | percentage浏览器

没有单位，默认单位就是像素(px)。例如：border-image:url(border.png) 27 repeat;这里的27专指27px。
支持百分比值，百分比值大小是相对于边框图片的大小，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

举个简单的例子，前面提到，支持百分比宽度，因此这里“30% 35% 40% 30%”的示意能够用下图表示：bash

距离图片上部30%的地方，距离右边35%，距离底部40%，左边30%的地方各剪裁一下。也就是对图片进行了“四刀切”，造成了九个分离的区域，这就是九宫格。

关键字：fill
做用是将border-image-source九宫格中间那一块切片做为DOM节点的背景。
素材图片box.png: 测试

.box {
    width: 27px;
    height:27px;
    border: 27px solid;
    border-image: url(box.png) 27 27 27 27 fill repeat stretch;
}
复制代码

三、边框背景宽度(border-image-width)

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
复制代码

border-image-width 字面意思是边框图片宽度，做用是将 DOM 节点分割成九宫格。
假设 border-image-slice 分割 border-image-source 的九宫格为A， border-image-width 分割 DOM 的九宫格为 B，A 与 B 的每一个格子存在一一对应关系，具体以下： url

border-image-width 参数的四种类型:spa

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

注：3d

border-image-width 的参数不能为负值
border-image-width的缺省值是number类型：1

四、重复性(border-image-repeat)

border-image-repeat: [ stretch | repeat | round | space ]{1,2}
复制代码

border-image-repeat 字面意义是边框图片平铺。做用是指定 border-image 的平铺方式。语法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式，九宫格的中间区域受这两参数的共同影响，以下： code

目前只能四值可供选择：stretch(拉伸), repeat(重复), round(平铺), space。其中，stretch 是默认值，space 目前chrome浏览器按 repeat 来渲染。这四个参数的效果以下：

注：

round 与 repeat 的区别：round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。
round 与 space 的区别：虽然都是凑整填充显示，可是 space 是在小方块之间有必定的空隙。

五、边框背景扩散(border-image-outset)

border-image-outset: [ <length> | <number> ]{1,4}
复制代码

border-image-outset做用是把原来的贴图位置向外延伸

.box {
	margin: 0 auto;
	width: 81px;
	height: 81px;
	border: 27px solid rgba(0,0,0,.1);
	border-image-source: url(//misc.aotu.io/leeenx/border-image/box.png);
	border-image-slice: 27 27 27 27;
	border-image-repeat: repeat;
}
.outset {
	border-image-outset: 27px;
}
复制代码

border-image-outset 与 border-image-width 参数的意义是同样的。
注：

border-image-outset 的值不能为负值

六、border image area

用于绘画 border image 的区域叫 border image area，它默认与边框盒子(border box)彻底重合。简单地说，border image area 就是 border-image-width 分割出来的九宫格。

6.1 border-box 与 border image area 的关系

上面有提到，border image area 默认与 border-box 是重合关系。
若是把标准后退到发展阶段，在发展阶段，DOM节点由 border-width 分割为九宫格，这个时期的 border-box 就是 border image area。
到了成熟阶段（即本章介绍的版本），border-box 与 border image area 是默认重合的两个空间，border-box 只负责盒子模型上的事务，border image area 则专一于边框图像空间分割。

6.2 border-width 能够分割 border image area吗？

在实际使用过程当中，发现 border-width 也能够分割 border image area。以下：

.box {
	margin: 0 auto;
	width: 27px;
	height: 27px;
	border: 27px solid rgba(242,181,78,.3);
	border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
	border-image-slice: 27 27 27 27 fill;
	border-image-repeat: stretch stretch;
}
复制代码

若是单从上述测试结果而言，border-width 能够分割 border image area 是正确。不过，这个结论有一个前提：border-image-width 与 border-image-outset 同时缺省。若是将CSS代码修改成：

.box {
	margin: 0 auto;
	width: 27px;
	height: 27px;
	border: 27px solid rgba(242,181,78,.3);
	border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
	border-image-slice: 27 27 27 27 fill;
	border-image-outset: 10px;
	border-image-repeat: stretch stretch;
}
复制代码

设置了 border-image-outset 后 border-width 的分割 border image area 的假像就被揭穿了！！ border-width 分割 border image area 的假象源自 border-image-width 的缺省值1，数值1表示 border-image-width 是 1x border-width，大白话就是border-image-width 的默认值是border-width。

七、简写：border-image

border-image: 
    <‘border-image-source’> || 
    <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || 
    <‘border-image-repeat’>
复制代码

因为 border-image-slice、border-image-width 与 border-image-outset 这三者的参数类似，因此有必要说一下，这三个参数在简写里有两个注意点:

border-image-outset 参数必定要在 border-image-width 以后，假设border-image-width缺省，仍然须要在原来 border-image-width 写上 /，以下：

border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
复制代码

若是有 border-image-width/ border-image-outset 属性值，border-image-slice必须指定数值，不然不合语法，以下：

border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;
复制代码

八、参考资料：

border-image 的正确用法
 CSS3 border-image 完全明白