border-image(H5C3)

border-image

border-image是css3中的一个属性,因为兼容性问题,比较少见,但鉴于此功能在某些特定的场景中还是有些作用的;这里就简单介绍下属性和功能
我们用下面的代码来展示下 它的属性和特点

效果图

在这里插入图片描述

代码块


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 150px;
            border: 20px solid #ccc;
            margin-bottom: 30px;
        }

        .box:first-child{
            /*border-image: url("images/border01.jpg") 167/20px round;*/
            /*1.在内容变化的容器可以使用,边框自动填充*/
            /*2.用法:*/
            /*2.1 图片资源*/
            border-image-source: url("images/border01.jpg");
            /*2.2 切割的尺寸 默认的单位px 而且不能使用小数*/
            /*2.2.1 切割的位置距离对应的边的距离  切了四刀   4个切割的尺寸*/
            border-image-slice: 167;/*167 167 167 167*/
            /*2.3 边框的宽度*/
            border-image-width: 20px;
            /*2.4 平铺的方式  三种平铺方式 round stretch repeat*/
            /*round 环绕 完整的自适应(等比缩放)平铺在边框内*/
            /*stretch 拉伸 拉伸显示在边框内容 变形的*/
            /*repeat 平铺 从边框的中间向两侧平铺 自适应平铺但是不是完整的*/
            border-image-repeat: round;

        }
        .box:nth-child(2){
            border-image: url("images/border01.jpg") 167/20px stretch;
        }
        .box:last-child{
            border-image: url("images/border01.jpg") 167/20px repeat;
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值