CSS3 border-image 属性

CSS3 border-image 属性

CSS3 border-image 属性可以用来制作有趣的边框效果，它可以将一张图片作为边框，而不是使用单一的颜色或样式。

语法

border-image: source slice width outset repeat|initial|inherit;
  • source：需要作为边框展示的图片地址，可以是绝对路径或相对路径，也可以是一个表示渐变效果的线性渐变或径向渐变表达式。
  • slice：定义了图片被切割的区域，通常是一个像素值或者是一个百分数。有几个特殊的关键字也可以使用：fill、repeat、round，它们分别表示将整个图片填充到边框中、重复图片以填满边框、将图像四个角的一小块拉伸以填充边框。
  • width：定义了边框的宽度，可以是一个像素值或者是一个百分数。
  • outset：定义了边框与元素外边界之间的距离。可以是一个像素值或者是一个百分数。
  • repeat：指定图片循环填充的方式，默认值是stretch，表示大小不变的拉伸填充。

实例

以下是一个使用 border-image 属性制作边框效果的示例。

HTML代码：

<div class="border-example">
  <p>这是一个示例文本</p>
</div>

CSS代码：

.border-example {
  border: 50px solid transparent;
  border-image: url('border-image.png') 50 round;
  padding: 20px;
}

其中，‘border-image.png’ 是一张裁剪好的图片，被用来作为边框，展示了一个深绿色的渐变效果。通过设置 slice 值为 50，告诉浏览器使用图像中间的部分作为边框，并用 round 关键字强制拉伸图片的四个角，以填充整个边框。

兼容性

border-image 属性被包含在CSS3规范中，因此只在较新的浏览器中得到兼容性支持，包括：

  • Chrome 15+
  • Safari 5.1+
  • Firefox 15+
  • Opera 12.1+
  • IE 11+

注意：IE 11+ 可以支持 border-image，但是有一些限制。IENTATION} 属性不能用于在垂直方向上缩放图片。border-image 只适用于元素的 border-box 区域，而不是 padding-box 或者 content-box 区域。

CSS3 border-bottom-right-radius 属性 CSS3 border-image-outset 属性