note

Appearance

border-image ​

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

示例原始图片：90 x 90

css
/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

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

border-image-slice ​

number 值，没有 px 单位

图片是九宫格式裁剪

区域 9 为中心区域（middle region）默认情况下会被丢弃，除非使用 fill。

css
/* All sides */
border-image-slice: 30%;
border-image-slice: 30 fill;

/* 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;

border-width 与 border-image-slice 并不要求对应

30
30

示例图片为 90 x 90，当超过一半后，就只剩下四个角了。

border-image-repeat ​

border-image-repeat：stretch、repeat、round、space

stretch：无情的拉伸（默认）

repeat：平铺，无情的重复工具

round：平铺，保证刚好填满，但会自动缩放

space：平铺，但会在两端留空白，保证不截断

border-image-width ​

border-image-width： 有 px 单位

border-image-width 与 border-width 有关系。

如果没有设置 border-image-width，默认值为 border-width 的值。

加入 border-width 为 30px,而 border-image-width 为 10px，那么 image border 只会占 10px ，有 20px 是空出来的。

30
10
  • 当指定 一个 值时，它将作用到 四个方向 ；
  • 当指定 两个 值时，它将分别作用到 垂直方向 和 水平方向 ；
  • 当指定 三个 值时，它将分别作用到 上方、水平方向、和下方；
  • 当指定 四个 值时，它将分别作用到 上方、右方、下方和左方。

border-image-outset ​

border-image-outset 效果是 边框发生向外延伸，类似 translate

border-image-outset 带不带单位是两个效果。

不带单位，比如 border-image-outset:2 那么实际效果为 2 * border-width

带单位，比如 border-image-outset:2px 那么实际效果为 2px

0

border-image tools ​

点击或拖拽文件到此处上传

一些案例 ​