border-image-width

基线 广泛可用

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

**border-image-width** CSS 属性设置元素的 边框图像 的宽度。

试一试

如果此属性的值大于元素的 border-width，则边框图像将扩展到填充（和/或内容）边缘之外。

语法

css
/* Keyword value */
border-image-width: auto;

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

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

border-image-width 属性可以使用下面列出的值中的一个、两个、三个或四个值指定。

  • 当指定 **一个** 值时，它将相同的宽度应用于 **所有四面**。
  • 当指定 **两个** 值时，第一个宽度应用于 **顶部和底部**，第二个应用于 **左侧和右侧**。
  • 当指定 **三个** 值时，第一个宽度应用于 **顶部**，第二个应用于 **左侧和右侧**，第三个应用于 **底部**。
  • 当指定 **四个** 值时，宽度按顺序（顺时针）应用于 **顶部**、**右侧**、**底部** 和 **左侧**。

值

<length-percentage>

边框的宽度，指定为 <length> 或 <percentage>。百分比相对于边框图像区域的 *宽度*（水平偏移）和边框图像区域的 *高度*（垂直偏移）。不得为负数。

<number>

边框的宽度，指定为对应 border-width 的倍数。不得为负数。

auto

边框的宽度等于对应 border-image-slice 的内在宽度或高度（以适用者为准）。如果图像没有所需的内在尺寸，则使用对应的 border-width。

正式定义

初始值1
应用于所有元素，除了 border-collapse 为 collapse 时的内部表格元素。它也应用于 ::first-letter。
继承否
百分比指边框图像区域的宽度或高度
计算值按指定，但将相对长度转换为绝对长度
动画类型按计算值类型

正式语法

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

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

示例

平铺边框图像

此示例使用以下 ".png" 文件创建边框图像，该文件为 90x90 像素

Square image containing eight circles. The circles in each corner are light purple. The four side circles are blue. The area in the middle, where a ninth circle could fit, is blank.

因此，源图像中的每个圆形为 30x30 像素。

HTML

html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

结果

规范

规范
CSS 背景和边框模块级别 3
# the-border-image-width

浏览器兼容性

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

另请参阅