此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
border-image-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSS属性border-image-width 指定了边界图像 (border image) 的宽度
尝试一下
border-image-width: 30px;border-image-width: 15px 40px;border-image-width: 2.6rem;border-image-width: 20% 8%;<section> <div>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-width，边界图像将会向 padding 边缘延展
语法
css
/* 关键字 */border-image-width: auto;/* 长度 */border-image-width: 1rem;/* 百分比 */border-image-width: 25%;/* 数值 */border-image-width: 3;/* 垂直 | 水平 */border-image-width: 2em 3em;/* 上 | 横向 | 下 */border-image-width: 5% 15% 10%;/* 上 | 右 | 下 | 左 */border-image-width: 5% 2em 10% auto;/* 全局值 */border-image-width: inherit;border-image-width: initial;border-image-width: unset;border-image-width 属性的值可用以下方式进行设定：
- 当指定一个 值时，它将作用到四个方向 ；
- 当指定两个 值时，它将分别作用到垂直方向 和水平方向 ；
- 当指定三个 值时，它将分别作用到上方、水平方向、和下方；
- 当指定四个 值时，它将分别作用到上方、右方、下方和左方。
取值
<长度 - 百分比>边界的宽度，可按
<length>或<percentage>指定。百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。<数值>边框宽度，指定为
border-width的相应倍数，不能为负。auto将等同于内部对应的
border-image-slice的宽或高（可用的话）。如果图像没有需要的相应的属性，将相对于border-width进行指定。
正式定义
| 初始值 | 1 |
|---|---|
| 适用元素 | all elements, except internal table elements whenborder-collapse iscollapse. It also applies to::first-letter. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width or height of the border image area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 动画类型 | 按计算值的类型 |
正式语法
border-image-width =
[<length-percentage [0,∞]>|<number [0,∞]>|auto]{1,4}
<length-percentage> =
<length>|
<percentage>
示例
Tiling a border image
示例使用了下方 90*90 像素的 ".png" 图像。
因此，每个圆圈为 30*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;}结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-width |