边框图像宽度 | border-image-width

border-image-width

border-image-width定义图像边框宽度。假如border-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展.

/* border-image-width: all */
border-image-width: 3;

/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;

/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;

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

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

初始值	1
适用元素	all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性	no
Percentages	refer to the width or height of the border image area
适用媒体	visual
计算值	as specified, but with relative lengths converted into absolute lengths
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

此属性可以采用一、二、三或四个值。每个值可以是长度、百分比或关键字。auto...

只有一个值：

该值表示用作边界的图像的宽度，以应用于所有四条边。具有两个值：

该值分别指定垂直和水平宽度。

有三个值：

值分别指定顶部，横向和底部的宽度。有四个值：

值分别指定顶部，右侧，底部，左侧的宽度。

还可以使用inherit关键字来指示所有四个值都从父元素的计算值继承。

值

<length-percentage>代表边框的宽度。它可以是绝对的或相对的长度。百分比指的是水平偏移的边界图像区域的宽度和垂直偏移的边界图像区域的高度。这个长度不能是负面的。<number>表示border-width要用作边框宽度的元素属性的计算值的倍数。这个数字不能是负数。auto使边框图像宽度等于相应的内在宽度或高度（以适用者为准）border-image-slice。如果图像不具有所需的固有尺寸，则使用相应的计算边框宽度。

正式语法

[ <length-percentage> | <number> | auto ]{1,4}where 
<length-percentage> = <length> | <percentage>

示例

HTML内容

<!DOCTYPE html>

<html>
   <head></head>
   <body>
      <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>
   </body>
</html>

CSS内容

p {
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"
   border-image-slice: 30;
   border-image-width: 20px;
   border-image-repeat: round;
   padding: 40px;
}

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-image-width' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	15.0	(Yes)	13.0 (13.0)	11	15	6

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	13.0 (13.0)	No support	?	?