border-image

小结

border-image 属性用来给元素边框添加背景图片。这使绘制复杂外观组件更简单，在有些情况下使用九宫格也不再必要。浏览器应用了 border-image 则不再应用 border-style 。

特别注意，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为none或者图片不能显示，则将应用border-style。

语法

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

值

请参见各值相对应的属性。

正式语法

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

示例

位图重复 (repeat)

图片被简单的分割填充边框区域

<div id="repeat">The image is tiled (repeated) to fill the area.</div>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

效果:

位图重复 (round)

round选项是重复选项的一个变体，能让图片的边框的边缘较圆润的链接。

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

效果:

位图拉伸

stretch选项拉伸图片填充边框区域。

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

效果:

规范

浏览器兼容性

• [1] Gecko的版本15前实现了有前缀的规范早期版本。
• [2] Opera的有前缀版本是在无前缀实现后添加的。