1. Web
  2. CSS
  3. border-image-width

border-image-width

Baseline 已广泛支持

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

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

试一试

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

<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-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>

示例

平铺边框图像

此示例使用以下 90 x 90 像素的“.png”文件创建边框图像

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.

因此，源图像中的每个圆圈都是 30 x 30 像素。

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 Backgrounds and Borders Module Level 3
# border-image-width

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题