CSS 边框图片

CSS 边框图片允许你在元素边框上添加图片。

语法

使用 border-image 属性实现边框图片效果。

border-image: source slice [width] [outset] [repeat|initial|inherit];

• source - 规定要用作边框的图像。可以是图片的 URL、渐变色或基于 SVG 的图片。
• slice - 规定以何种方式裁剪边框图像。可以是一个长度值、两个长度值、四个长度值或百分比值。
• width - 规定边框图像的宽度。可以是一个单一的值、一个由 1 到 4 个值组成的值，取决于边框图像的“slice”值。
• outset - 规定边框图像区域向外延伸的偏移值。可以是一个单一的值、一个由 1 到 4 个值组成的值，取决于边框图像的“slice”值。
• repeat - 规定边框图像是否重复式绘制。可以是一个单一的值、一个由 1 到 2 个值组成的值。

示例

1. 使用单一图片

.border-image-1 {
  border: 10px solid transparent;
  border-image: url("border.png") 30 round;
}

2. 使用单一图片进行缩放

.border-image-2 {
  border: 10px solid transparent;
  border-image: url("border.png") 30 round stretch;
}

3. 使用多个图片

.border-image-3 {
  border: 30px solid transparent;
  border-image: 
    url("border.png") 30 round repeat,
    url("border2.png") 50 / 20px / 10px space repeat;
}

4. 使用渐变色

.border-image-4 {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, red, blue) 30 / 10px repeat;
}

总结

CSS 边框图片为元素提供了有趣的边框效果，可以增强网站的视觉吸引力。学会如何创建边框图片，可以为您的项目增添一些创意和乐趣。