CSS 边框图像
CSS 边框图片
使用 CSS border-image 属性，您可以为元素的边框设置图像。
CSS border-image 属性
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 border-image - 不同的切片值
不同的切片值会完全改变边框的外观
示例 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 | 指定边框图像是重复、圆角还是拉伸 |
