border-image

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 typediscrete

语法

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

参考各属性对应的值。

正式语法

示例

位图

HTML 内容

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

CSS 内容

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

渐变

HTML 内容

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

CSS 内容

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

规范

规范 状态 备注
CSS Backgrounds and Borders Module Level 3
border-image
Candidate Recommendation  

浏览器兼容性

BCD tables only load in the browser