半透明边框——《css揭秘》

<style type="text/css">
        .wrapper{
            height: 50px;
            width: 50px;
            border: 10px dashed rgba(108, 150, 228, 0.5);
            background: rgb(223, 118, 118);
            padding: 10px;
        }
        body{
            background-color: #1e6109;
        }
    </style>

<body>
    <div class="wrapper">
        
    </div>
</body>

这个时候会显示出这样的效果。
半透明边框——《css揭秘》
如果在加上background-clip属性就会不一样。
(1)默认的background-clip是border-box,从border区域向外裁剪背景。
(2)如果为padding-box,从padding区域向外裁剪背景,就会变成下面这样。
半透明边框——《css揭秘》
(3)如果为content-box,从content区域向外裁剪背景,就会变成下面这样。
半透明边框——《css揭秘》

相关推荐