CSS 边框图片用法示例 _CSS边框图片

的边框图像属性CSS中的ins用于指定图像的边框。此属性使用图像而不是普通边框创建边框。该属性包含以下三部分：

完整图像用作边框。
图像切片用作边框
图像的中间部分(重复或拉伸)用作边框

border-image属性用于将图像切成九个部分, 例如井字游戏板。
语法如下：

element {border-image: url(border.png); }

【CSS 边框图片用法示例】边框图像属性：下面列出了许多border-image属性：

border-image-source：此属性用于设置图像路径。
边框图像宽度：此属性用于设置边界图像的宽度。
边框图像切片：此属性用于切片图像的边界。
边框图像重复：此属性用于将图像的边界设置为圆形, 重复和拉伸。
边框图像起点：此属性用于指定边框图像区域超出边框的数量。

例子：

< !DOCTYPE html> < html > < head > < title > CSS | Border Images < / title > < style > body { text-align:center; } h1 { color:green; } .border1 { border: 10px solid transparent; padding: 15px; border-image-source: url( https://media.lsbin.org/wp-content/uploads/border1-2.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } .border2 { border: 10px solid transparent; padding: 15px; border-image: url( https://media.lsbin.org/wp-content/uploads/border1-2.png) 30 stretch; } .border3 { border: 10px solid transparent; padding: 15px; border-image: url( https://media.lsbin.org/wp-content/uploads/border1-2.png) 20% round; } div { margin-top:20px; } < / style > < / head > < body > < h1 > lsbin< / h1 > < h2 > border-image property< / h2 > < div class = "border1" > Border 1< / div > < div class = "border2" > Border 2< / div > < div class = "border3" > Border 3< / div > < / body > < / html >

输出如下：