CSS参考手册
背景和边框 | Backgrounds & Borders
边框图片 | border-image
该border-image
CSS属性允许在元素的边界绘制图像。这使得绘制复杂外观的小部件比现在简单得多,并且在某些情况下不需要九个盒子。本border-image
是用来代替由给定的边框样式border-style
属性。
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
虽然规范要求border-style
必须存在,如果border-image
使用,一些浏览器可能不会实现这一点。需要注意的是,如果计算值是非常重要的border-image-source
,它可以通过设置border-image-source
或简写border-image
,是none
,或者如果无法显示的图像,边框样式将被使用。
初始值 |
as each of the properties of the shorthand: border-image-source: none border-image-slice: 100% border-image-width: 1 border-image-outset: 0s border-image-repeat: stretch |
---|---|
适用元素 |
as each of the properties of the shorthand: border-image-outset: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-repeat: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-slice: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-source: all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. border-image-width: all elements, except table elements when border-collapse is collapse. It also applies to ::first-letter. . It also applies to ::first-letter. |
是否是继承属性 |
no |
Percentages |
as each of the properties of the shorthand: border-image-slice: refer to the size of the border image border-image-width: refer to the width or height of the border image area |
适用媒体 |
visual |
计算值 |
as each of the properties of the shorthand: border-image-outset: as specified, but with relative lengths converted into absolute lengths border-image-repeat: as specified border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified border-image-source: none or the image with its URI made absolute border-image-width: as specified, but with relative lengths converted into absolute lengths |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
-
border-image-source
:none
-
border-image-slice
:100%
-
border-image-width
:1
-
border-image-outset
:0s
-
border-image-repeat
:stretch
Applies to as each of the properties of the shorthand:
-
border-image-outset
:所有元素,除了内部表元素时border-collapse
是collapse
。它也适用于::first-letter
。
-
border-image-repeat
:所有元素,除了内部表元素时border-collapse
是collapse
。它也适用于::first-letter
。
-
border-image-slice
:所有元素,但内部表元素除外border-collapse
是collapse
它也适用于::first-letter
。
-
border-image-source
:所有元素,但内部表元素除外border-collapse
是collapse
它也适用于::first-letter
。
-
border-image-width
:所有元素,但表元素除外border-collapse
是collapse
它也适用于::first-letter
。
。它也适用于::first-letter
。作为速记的每个属性,继承“否”百分比:
-
border-image-slice
:参考边界图像的大小
-
border-image-width
:指边界图像区域的宽度或高度。
Media visual [Computed value](computed_value) as each of the properties of the shorthand:
-
border-image-outset
:按规定,相对长度转换为绝对长度
-
border-image-repeat
:具体规定
-
border-image-slice
:1至4个百分比(如指定的)或绝对长度(s),加上关键字(fill
如果指定)
-
border-image-source
:none
或将具有其URI的图像变为绝对的。
-
border-image-width
:按规定,相对长度转换为绝对长度
Animation type discrete Canonical order the unique non-ambiguous order defined by the formal grammar
语法
值
请参阅不同值的相应属性。
正式语法
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
示例
位图
CSS内容
#bitmap {
border: 30px solid transparent;
padding: 20px;
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
}
HTML内容
<div id="bitmap">The image is stretched to fill the area.</div>
梯度
CSS内容
#gradient {
border: 30px solid;
border-image: linear-gradient(red, yellow) 10;
padding: 20px;
}
HTML内容
<div id="gradient">The image is stretched to fill the area.</div>
规范
Specification |
Status |
Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'border-image' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Firefox (Gecko) |
Chrome |
Edge |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
3.5 (1.9.1)-moz1 15 (15)2 |
7.0-webkit 16.0 |
(Yes)-webkit (Yes) |
11 |
10.5 / 11.0-o3 15.0 |
3.0-webkit 6.0 |
optional <border-image-slice> |
15 (15) |
? |
? |
? |
? |
? |
fill keyword |
15 (15) |
(Yes) |
? |
? |
No support |
6 |
<gradient> |
29.0 (29.0) |
(Yes) |
? |
(Yes) |
(Yes) |
(Yes) |
Feature |
Android Browser |
Edge |
Firefox Mobile (Gecko) |
iOS Safari |
Opera Mini |
Opera Mobile |
---|---|---|---|---|---|---|
Basic support |
2.1-webkit |
(Yes)-webkit (Yes) |
3.5 (1.9.1)-moz1 15 (15)2 |
3.2 -webkit 6.0 |
No support |
11.0-o |
optional <border-image-slice> |
? |
? |
15.0 (15) |
? |
No support |
? |
fill keyword |
18.0 |
? |
15.0 (15) |
6 |
No support |
No support |
<gradient> |
(Yes) |
? |
29.0 (29.0) |
(Yes) |
(Yes) |
(Yes) |
该规范的早期版本在15之前的Gecko版本(Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12)中实现了前缀。
直到Gecko 47.0(Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44)没有视口的SVG没有正确切片(bug 619500)。从壁虎48.0(火狐48.0 / 48.0的Thunderbird / SeaMonkey的2.45)开始,他们都显示同样的SVGs与视口,但如果切片是不完全的50%,他们无法正确的拉伸(错误1264809)。Gecko 49.0(Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46)修复了这个问题,但是当e10s被禁用时(bug 1290782),没有视口的SVG仍然存在问题。
此外,小SVGs被错误地拉伸,因为border-image-slice
中的百分比数计算为整数而不是浮点数(bug 1284797)。
除了对非前缀的支持外,Gecko 44.0(Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)还增加了对该属性的-webkit
前缀版本的支持,以解决layout.css.prefixes.webkit
默认情况下为默认值false
的网站兼容性问题。因为Gecko 49.0(Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46)的首选项默认为true
。
对于Opera,前缀属性是在非前缀后添加的。
背景和边框 | Backgrounds & Borders相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。