border-image-repeat

Summary

border-image-repeat 定义图片如何填充边框。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。

  • 初始值 stretch
  • 适用元素 all elements, except internal table elements when border-collapse is collapse
  • 可继承 no
  • 适用媒体 visual
  • 计算值 as specified
  • 可动画
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [ stretch | repeat | round ]{1,2}  
border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit

Values

type
stretch, repeat, round, space 选一。属于单个值的情况。
horizontal
stretch, repeat, round, space 选一。属于两个值的情况。
vertical
stretch, repeat, round, space 选一。属于两个值的情况。
stretch
拉伸图片以填充边框。
repeat
平铺图片以填充边框。
round
类似于repeat,不过是整数次平铺。
inherit
继承父级元素的计算值。

Examples

不同的取值,查看 border-image 的示例。

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation Initial specification

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 15.0 (15.0) Not supported ? ?

早期候选推荐版本中有space,不过没有浏览器实现它,因而移除,将来可能添加进来。

 

See also

Document Tags and Contributors

Contributors to this page: yan
最后编辑者: yan,