border-image-width

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

CSS 的 border-image-width 属性用于确定边框图像文件的宽度,该宽度由 CSS 的 border-image-source 属性提供。

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%;
  border-image-repeat: repeat; 
}

border-image-width 属性在 CSS 背景和边框模块级别 3 规范 中定义。 它的功能被描述为“绘图区域”,这恰当地描述了该属性如何在元素的外边缘绘制一个区域以预留边框图像的空间。

语法

border-image-width: [<length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
  • 初始值 1
  • 应用于:所有元素(包括 ::first-letter 伪元素),但当 border-collapse 设置为 collapse 时,内部表格元素除外。
  • 继承:
  • 百分比:相对于边框图像区域的宽度/高度
  • 计算值:四个值,每个值都是一个数字、关键字 auto 或计算的 <length-percentage>
  • 动画类型:按计算值

border-image-width 接受一到四个值,类似于 marginpadding 简写属性

  • 一个值:将所有四边的偏移距离设置为相同
  • 两个值:第一个值设置顶部和底部的偏移量;第二个值设置左侧和右侧的偏移量
  • 三个值:第一个值设置顶部的偏移量;第二个值设置右侧和左侧的偏移量;第三个值设置底部的偏移量
  • 四个值:按顺时针顺序设置每边的偏移量,从顶部开始(依次为顶部、右侧、底部和左侧)

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

/* Single value */
/* Sets all four sides */
border-image-width: 20%;
border-image-width: 2rem;
border-image-width: auto;

/* Two values */
/* top and bottom | left and right */
border-image-width: 4rem 10%;
border-image-width: auto 3rem;
border-image-width: 2 2rem;

/* Three values */
/* top | left and right | bottom */
border-image-width: 10% 40% 4;
border-image-width: 5 auto 10;
border-image-width: 30% 60% auto;

/* Four values */
/* top | right | bottom | left */
border-image-width: 20 3rem 40% auto;
border-image-width: 2 10rem 10% 40%;
border-image-width: 40 auto 20% auto;

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

<length-percentage [0,∞]>

<length-percentage> 值指定一个长度或百分比值,可以将其设置为 CSS 的 border-image-width 属性,以指定边框上图像的宽度和高度。

长度值以 CSS 单位指定图像的宽度和高度尺寸

.container{
  /* top and bottom | left and right */
  border-image-width: 4rem 4.5rem;
}

上面的示例为边框的顶部和底部偏移量指定了 4rem 单位长度,为边框的左侧和右侧偏移量指定了 4.5rem 单位长度。

百分比值将边框图像的宽度和高度尺寸表示为百分比

.container {
  border-image-width: 20%;
}

它的工作原理与 border-image-slice 属性的百分比值相同,其中百分比相对于图像的大小。 例如,下面演示中使用的 GIF 的尺寸为 498px×280px。 当我们将 border-image-width 值设置为 20% 时,计算出的宽度为 99.6px498px * 20%),沿着顶部和底部,高度为 56px280px * 20%),沿着边框的右侧和左侧。

number [0,∞]

当使用无单位的非负整数作为 border-image-width 值时,它表示元素的 border-width 值的倍数。 考虑以下情况

.container {
  border-image-width: 2;
  border-width: 2rem;
}

这里,border-image-width 值(2)乘以 border-width 值(2rem)来计算边框图像的使用宽度(4rem)。

还要注意,根据 CSS 盒模型border-image-width 从元素的边框框绘制其边框。 并且当它绘制区域时,它从边框框开始向内工作。

Rectangle with four arrows in each corner pointing inward towards the center.
border-image-width 的大小是从元素的外边缘到元素的内边缘。

这与 border-width 的工作方式完全不同,后者会扩大容器的边框框,从而增加元素的整体尺寸。

Rectangle with four arrows in each corner pointing outward, away from the center.
border-width 的大小是从元素的外边缘到元素的边框框之外。

换句话说,border-image-width 扩大了图像宽度,而不会影响元素的整体大小。

auto

使用 auto 关键字是基于 border-image-source 提供的图像的自然(未指定)大小或元素的 border-width 值。

它是如何选择使用哪一个的呢?如果图像具有自然(或“固有”)尺寸,则使用该值。例如,如果图像为 200px 正方形,则 200px 为应用的值。如果没有自然尺寸,比如没有宽度或高度属性的 SVG,则改为使用 border-width 值。

如果元素上没有 border-width 会怎么样?border-width 的初始样式为 none,这会导致宽度为零。

“自然尺寸”指的是图像的完整宽度和高度尺寸。例如,如果我们在页面上放置一个 <img> 并且它是 500px 正方形,那么这就是自然尺寸。这与图像在其上下文中的尺寸不同。例如,如果我们使用 <img width="200"> 设置相同的图像,即使图像在屏幕上呈现为 200px,自然尺寸仍然是 500px 正方形。

重叠边框

假设我们有一个自然尺寸为 500px 正方形的边框图像

.element {
  border-image-source: url("/image-500px.webp");
}

现在假设我们将 border-image-width 设置为超过图像尺寸的值

.element {
  border-image-source: url("/image-500px.webp");
  border-image-width: 2; /* 400px = 200px * 2 */
  border-width: 200px;
}

在这种情况下,边框会重叠,因为偏移量在宽度和高度维度上加起来为 800px。但是,该属性“智能”地按比例减少每侧的应用 border-image-width 值,直到边框不再重叠。在这种情况下,需要将每个偏移量的值减少 100px 以适应图像的自然尺寸。

规范 提供了浏览器用来计算该值的公式

f = min(Lwidth/(Wleft + Wright), Lheight/(Wtop + Wbottom))

其中

Lwidth = width of the border image area (`border-width`)
Lheight = height of the border image area
Wleft = Left offset of the border image width
Wright = Right offset of the border image width
Wtop = Top offset of the border image width
Wbottom = Bottom offset of the border image width

计算出 f 后,我们检查 f 是否小于 1,如果是,则将偏移值(WleftWrightWtopWbottom)乘以 f 以减少它。

将我们上面示例中的值代入我们的等式,我们得到

f = min(200px/(400px + 400px), 500px/(400px + 400px)) = 0.25

由于 f 小于 1,因此我们将所有偏移量乘以 0.25,得到新的偏移值 100px

演示

更改下面 border-image-widthborder-width 的值,以查看每个输入如何影响图像大小。

浏览器支持

更多信息