CSS 边框图片用法示例

2021年3月10日15:57:28 发表评论 578 次浏览

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

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

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

语法如下：

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

边框图像属性：下面列出了许多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 >

输出如下：