CSS 边框图像
CSS 边框图像
使用 CSS border-image 属性，您可以设置一个图像作为元素周围的边框。
CSS 边框图像属性
CSS border-image 属性允许您指定一个图像，用来代替元素周围的正常边框。
该属性有三个部分
- 用作边框的图像
- 图像的切片位置
- 定义中间部分是否应重复或拉伸
我们将使用以下图像（称为“border.png”）
border-image 属性将图像切分成九个部分，就像井字棋盘一样。然后它将角放置在角上，中间部分根据您的指定进行重复或拉伸。
注意：为了使 border-image 起作用，元素还需要设置 border 属性！
这里，图像的中间部分重复以创建边框
边框图像！
以下是代码
示例
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
亲自尝试 »
这里，图像的中间部分拉伸以创建边框
边框图像！
以下是代码
示例
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
亲自尝试 »
提示：border-image 属性实际上是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写属性。
CSS 边框图像 - 不同的切片值
不同的切片值会完全改变边框的外观
示例 1
border-image: url(border.png) 50 round;
示例 2
border-image: url(border.png) 20% round;
示例 3
border-image: url(border.png) 30% round;
以下是代码
示例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
亲自尝试 »
CSS 边框图像属性
| 属性 | 描述 |
|---|---|
| border-image | 设置所有 border-image-* 属性的简写属性 |
| border-image-source | 指定要用作边框的图像的路径 |
| border-image-slice | 指定如何切片边框图像 |
| border-image-width | 指定边框图像的宽度 |
| border-image-outset | 指定边框图像区域超出边框框的量 |
| border-image-repeat | 指定边框图像是否应该重复、圆形或拉伸 |
