CSS揭秘之《制作半透明边框》

2024年5月29日 133次阅读 来源: angelayun

1、默认状态下，背景会延伸到边框的区域下层
2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box， 意味着背景会被元素的 border box（边框的外沿框） 裁切掉
实现半透明边框代码如下：

         body {
            background-image: url('./images/stone-art.jpg')
        }

        div {
            max-width: 20em;
            padding: 2em;
            margin: 2em auto 0;
            font: 100%/1.5 sans-serif;
            /* 通过border设置a通道 然后background-clip: padding-box */
            background-color: #fff;
            border: 10px solid hsla(0, 0%, 100%, .5);
            background-clip: padding-box
        }
    <div>
        Can I haz semi-transparent borders? Pretty please?
    </div>

具体效果见 链接

    原文作者：angelayun
    原文地址: https://segmentfault.com/a/1190000010989837
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞