CSS3实现半透明边框

一、往期文章二、CSS hsla() 函数四、代码三、效果图

一、往期文章

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>

三、效果图

如果觉得《CSS实现半透明边框》对你有帮助，请点赞、收藏，并留下你的观点哦！