1. Web
  2. CSS
  3. border-image

border-image

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

border-image 这个 CSS 属性可以在指定元素的周围绘制图像，并替换掉元素常规的 border。

试一试

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: black;
  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 属性的简写：

语法

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;

/* Global values */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

border-image 属性可以指定下面列出的一个到五个值。

备注： 如果 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-collapse 为 collapse 时，内部表格元素除外。该属性也适用于 ::first-letter。
继承性否
百分比作为简写中的每个属性
计算值作为简写中的每个属性
动画类型作为简写中的每个属性

正式语法

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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

位图

在此示例中，我们将为元素的边框应用菱形图案。边框图像的源是一个 81x81 像素的“.png”文件，其中垂直和水平方向各有三个菱形。

Eight diamonds: four red diamonds, one in each corner, and four orange diamonds, one on each side. The middle is empty.

HTML

html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

为了匹配单个菱形的大小，我们将使用 81 除以 3 的值，即 27，来将图像切割成角落和边缘区域。为了使边框图像在元素背景的边缘居中，我们将外扩（outset）值设为宽度值的一半。最后，round 的重复值将使边框切片均匀适配，即不会出现裁剪或间隙。

css
#bitmap {
  width: 200px;
  background-color: #ffffaa;
  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">
  This element is surrounded by a gradient-based border image!
</div>

CSS

css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

结果

圆角边框

border-radius 对边框图像没有影响。这是因为 border-image-outset 能够将图像放置在边框盒之外，所以边框图像被边框区域裁剪是没有意义的。在使用边框图像时创建圆角边框，你应该用圆角来创建图像本身，或者在渐变的情况下，将其绘制为背景。下面我们展示了一种实现方法，即使用两个 background-image：一个扩展到边框盒，另一个用于内边距盒。

HTML

html
<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

css
#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

结果

备注： 有一个新的 background-clip: border-area 值正在被提议，以解决此用例。

规范

规范
CSS Backgrounds and Borders Module Level 3
# border-image

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.