边框图片 | border-image (Backgrounds & Borders) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

边框图片 | border-image (Backgrounds & Borders) - CSS 中文开发手册

该border-imageCSS属性允许在元素的边界绘制图像。这使得绘制复杂外观的小部件比现在简单得多，并且在某些情况下不需要九个盒子。本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：noneborder-image-slice：100%border-image-width：1border-image-outset：0sborder-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，前缀属性是在非前缀后添加的。

  CSS 中文开发手册

  本文标题：边框图片 | border-image (Backgrounds & Borders) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32339.html