边框图像

基线 广泛可用

此功能已经成熟，并在许多设备和浏览器版本上运行良好。它自 2017 年 2 月.

border-image CSS 属性在给定元素周围绘制图像。它替换元素的常规 边框。

试一试

注意：如果边框图像无法加载，您应该指定一个单独的 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>       |
  <gradient>  

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

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

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

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

示例

位图

在本例中，我们将应用菱形图案到元素的边框。边框图片的源是一个 81x81 像素的 ".png" 文件，其中包含三个垂直和水平排列的菱形。

an example borderimage

HTML

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

CSS

为了匹配单个菱形的大小，我们将使用 81 除以 3，即 27，作为将图像切分成角部和边缘区域的值。为了将边框图片居中在元素背景的边缘，我们将使外侧值等于宽度值的一半。最后，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">
  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, #f33, #3bf, #f33 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 背景和边框模块级别 3
# the-border-image

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见