border-image

Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

border-image CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

特别注意，若 border-image-source（此值可用 border-image-source 或 border-image 简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

初始值as each of the properties of the shorthand:
适用元素all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性否
Percentagesas each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

语法

css

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

值

参考各属性对应的值。

正式语法

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>

示例

位图

HTML 内容

html

<div id="bitmap">The image is stretched to fill the area.</div>

CSS 内容

css

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("border.png") 30;
}

渐变

HTML 内容

html

<div id="gradient">The image is stretched to fill the area.</div>

CSS 内容

css

#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image

浏览器兼容性

BCD tables only load in the browser