CSS参考手册
背景和边框 | Backgrounds & Borders
边框图像宽度 | 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 |
? |
? |
背景和边框 | Backgrounds & Borders相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......