CSS实现半透明边框

一、往期文章

CSS3回炉计划-编码技巧

---

如何实现半透明边框，边框中显示背景？

二、CSS hsla() 函数

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
hsla分别指

• 色相（H）颜色名称，色彩的基本属性
• 饱和度（S）指的是颜色纯度，范围0~100%，越高颜色约纯，反之亦然逐渐变灰。
• 亮度（L）范围0~100%
• 透明度（A）范围0~1，表示透明度

hsla(hue, saturation, lightness, alpha)

四、代码

background-clip属性初始值是border-box，代表背景元素的border box(边框的外沿框）裁切掉。现在我们不希望背景侵入边框所在范围，把值设置为padding-box，用内边距的外沿把背景裁切掉。

<template>
    <div class="father">
        <div class="test">
        @犬莱八荒
        </div>
    </div>
</template>

<style lang='scss'>
    .father{
        height: 14em;
        width: 20em;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("./src/assets/csdn/lanse.jpeg");
        display: flex;
        align-items: center;
        justify-content: center;
        .test{
            height: 7em;
            width: 10em;
            border: .8em solid hsla(0,0%,100%,.5);
            background: white;
            background-clip: padding-box;
        }
    }
</style>

三、效果图