CSS – 边框图片border-image

简介

在CSS3 中，新增了一种用于设置边元素边框图片的方法.

正常下我们可以通过设置border: px solid color; 这样的方式进行对元素边框进行着色，如今CSS3可以使用图片对边框进行着色了。

原始样式

要知道边框图片和普通边框有什么区别，我们先设置一个原始的边框，如下图

width: 300px;
height: 300px;
border: 33px solid black;

我们现在提供一个用于定位的图片，进行对边框图片的研究。

边框图片设置

broder-image-source

broder-image-source 是用于定义边框图片源

broder-image-source: url("./borderomage.png")

通过设置broder-image-source后，所属边框将被图片所代替

这和我们想象的不太一样，这是因为，使用broder-image在不设置任何参数情况下，我们的边框图片，只作为1份分割份平铺在边框上，所以我们需要第二个属性 border-image-slice 的帮忙。

border-image-slice

border-image-slice 是对边框图边进行等比例切割，如我们上图，是一个 99px*99px的图片，我们可以把它分成三等分，这样我们切割的每一份是 33px

border-image-slice: 33;

将会得到如下效果

border-image-slice会把中间部分定义为 内容 部分，所以会自动给去除，当然border-image-slice还可以设置第二个参数，用于定义把边框图片的中间部分作为这个元素的背影图片。

border-image-slice: 33 fill;

这时我们发现，上下两侧的边框有拉伸情况，我们也可以设置它不拉伸而是重复，这时我们需要另一个属性 border-image-repeat

border-image-repeat

border-image-repeat 是用于设置边框图片的铺叠方式的，如上图的效果，我们可以知道，它是通过整个图片中间挖空（或不挖空），直接平铺上去的，这使得上下左右四边的图片存在拉伸效果，那如果我们不想它拉伸呢，我们可以使用以下两种参数

repeat : 对图片进行重复铺叠，但是不会缩放切割网格图片，不自适应

会发现使用 repeat 时，若边框长度不是网格长度的倍数时，会出现剪裁，影响效果

round : 对图片进行重复铺叠，但是会让切割的网格图缩放以达到适应边框尺寸

使用 round 时，会让网格进行缩放，以适应元素边框的填充，不会出现剪裁的问题。

stretch : 默认值，即使用拉伸处理。

border-image-width

border-image-width 是一个设置边框宽度的属性，我们知道，设置边框宽度还有一个经典属性

border: 1px solid black;

这个属性，默认情况下，是不占用元素大小的（即设置了border会使元素撑大），而

border-image-width 只是设置边框图片的宽度，而不撑大元素大小。举例

border: 1px solid black;
border-image-width: 33;

这是 border 边框宽度为1,而 border-image-width 为33 的情况下，会发现内容被叠到边框图片上面了，这是因为，border-image-width 不占有元素位置，实际上 元素上的文字是排在 border 边框之下，

假如先设置border 再设置border-image-width，最终边框图片的宽度是 border * border-image-width .

假如先设置border-image-width，再设置border ，最终边框的宽度还是border

举个例子，

border: 1px solid black;  // 先设置了 border
border-image-width: 33;

实际边框图片为 33

而如果 border为2px 时，则

border: 2px solid black;
border-image-width: 33;

实际边框图片为 66

先设置 border-image-width 后设置 border

border-image-width: 33;  // 先设置border-image-width
border: 33px solid black;

border-image-outset

border-image-outset 比较少用，指的是撑大元素的大小用于存放边框图片的位置，这个属性对box-sizing: border-box;无效，即使设置了box-sizing: border-box;

但依然会被撑大，所以比较不常用，默认值为 0px

简写 border-image

边框图片提供简写方法，语法是

border-image: source slice / width / outset repeat;

通过以上的举例，我们可以使用简写

border-image: url("./borderimage.png") 33 fill / 33 / 0px round;

附录

这里的 border 是默认撑大元素大小的，即 box-sizing: content-box;

如果box-sizing: border-box;时，元素就不会撑大了。