css怎么设置图片边框(2)-木庄网络博客

举例：平铺方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:170px;
            height:110px;
            line-height:110px;
            text-align: center;
            border:30px solid gray;
            margin-top:20px;
        }
        /*第1个div平铺方式为：repeat*/
        #div1{border-image:url(img/border.png) 30 repeat;}
        /*第2个div平铺方式为：round*/
        #div2{border-image:url(img/border.png) 30 round;}
        /*第3个div平铺方式为：stretch*/
        #div3{border-image:url(img/border.png) 30 stretch;}
    </style>
</head>
<body>
    <div id="div1">repeat</div>
    <div id="div2">round</div>
    <div id="div3">stretch</div>
</body>
</html>

浏览器预览效果如下图所示：

分析：

border-image属性的平铺方式有3种：repeat、round、stretch。

（1）取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。

（2）取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。

（3）取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。

border-image的派生子属性

border-image属性可以分开，分别为4条边设置相应的背景图片，这4条边的属性如下表所示。

border-image的派生子属性
子属性	说明
border-top-image	定义上边框背景图片
border-bottom-image	定义下边框背景图片
border-left-image	定义左边框背景图片
border-right-image	定义右边框背景图片

（学习视频分享：css视频教程）

以上就是css怎么设置图片边框的详细内容，更多文章请关注木庄网络博客！

返回前面的内容