border-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

border-image CSS 属性在给定元素的周围绘制图像，取代元素的常规边框。

尝试一下

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: #000;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

备注： 你应该另外指定 border-style 以防边框图像没能加载。虽然规范并没有严格要求这一点，但当 border-style 为 none 或 border-width 为 0 时，某些浏览器不会渲染边框图像。

语法

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: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

border-image 属性可以用下面列出的 1 到 5 个值中的任意值指定。

备注： 如果 border-image-source 的计算值为 none，或图像无法显示，则将显示 border-style。

值

<'border-image-source'>: 源图像。见 border-image-source。
<'border-image-slice'>: 尺寸，用于将源图像分割为多个区域。最多可以指定四个值。见 border-image-slice。
<'border-image-width'>: 边框图像的宽度。最多可以指定四个值。见 border-image-width。
<'border-image-outset'>: 边框图像到元素外部边缘的距离。最多可以指定四个值。见 border-image-outset。
<'border-image-repeat'>: 定义源图像边缘区域适配边框图像尺寸的方式。最多可以指定两个值。见 border-image-repeat。

无障碍考虑

辅助技术无法解析边框图像。如果图像包含对理解页面的整体内容至关重要的信息，最好在文档中对其进行语义描述。

形式定义

初始值	该简写所对应的每个属性： `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
适用元素	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
是否是继承属性	否
Percentages	该简写所对应的每个属性： `border-image-slice`: refer to the size of the border image `border-image-width`: refer to the width or height of the border image area
计算值	该简写所对应的每个属性： `border-image-outset`: as specified, but with relative lengths converted into absolute lengths `border-image-repeat`: as specified `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified `border-image-source`: `none` or the image with its URI made absolute `border-image-width`: as specified, but with relative lengths converted into absolute lengths
动画类型	该简写所对应的每个属性： `border-image-outset`: 按计算值的类型 `border-image-repeat`: 离散值 `border-image-slice`: 按计算值的类型 `border-image-source`: 离散值 `border-image-width`: 按计算值的类型

形式语法

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

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

位图

在这个示例中，我们将菱形图案作为元素的边框图像。边框图像的源文件是一个 81 x 81 像素的“.png”文件，垂直方向和水平方向上各排列着三个菱形。

一个示例边框图像

HTML

html

<div id="bitmap">这个元素被基于位图的边框图像围绕！</div>

CSS

每个菱形的宽和高皆为 81 ÷ 3 = 27，所以我们将 border-image-slice 设置为 27，这样图像的角区域和边缘区域宽高皆为 27px。为了使每个菱形的中心恰好位于元素背景的边缘，我们将令 border-image-outset 等于 border-image-width 的一半。最后，将 border-image-repeat 设置为 round 使分割出的不同区域均匀贴合，没有裁剪或间隙。

css

#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

结果

渐变

HTML

html

<div id="gradient">这个元素被基于渐变的边框图像围绕！</div>

CSS

css

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}

结果

规范

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

浏览器兼容性

参见

border
outline
box-shadow
background-image
<url> 类型
渐变函数：conic-gradient()、repeating-conic-gradient()、linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()
MDN 博客（2023）CSS 中的边框图像：Interop 2023 的重点关注领域