border-image

绘制图片来替代元素的border。

syntax：

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

note： 有些浏览器需要设置border-style和border-width属性，否则不渲染。

1. border-image-source

border的图片源

syntax:

/* <image> values */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

2. border-image-slice

切割原图划分出区域，用区域形成border

1-4区域形成border角

5-8区域通过重复、缩放、或者其他方式形成border边

9区域可以通过关键字fill来实现背景填充

syntax:

/* All sides */
border-image-slice: 30%;
​
/* vertical | horizontal */
border-image-slice: 10% 30%;
​
/* top | horizontal | bottom */
border-image-slice: 30 30% 45;
​
/* top | right | bottom | left */
border-image-slice: 7 12 14 5;
​
/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;

3. border-image-width

border宽度

syntax:

/* <length> value */
border-image-width: 1rem;
​
/* <percentage> value */
border-image-width: 25%;
​
/* <number> value */
border-image-width: 3;
​
/* vertical | horizontal */
border-image-width: 2em 3em;
​
/* top | horizontal | bottom */
border-image-width: 5% 15% 10%;
​
/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

4. border-image-outset

设置border-image与远离border-box的距离

syntax:

/* <length> value */
border-image-outset: 1rem;
​
/* <number> value */
border-image-outset: 1.5;
​
/* vertical | horizontal */
border-image-outset: 1 1.2;
​
/* top | horizontal | bottom */
border-image-outset: 30px 2 45px;
​
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;

5. border-image-repeat

5-8区域适应填充border方式

syntax:

/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
​
/* vertical | horizontal */
border-image-repeat: round stretch;