Chrome浏览器下半透明圆角边框剪裁问题示意实例页面

回到相关文章 »

效果：

有问题的情况（点击圈圈透明度变化）：

使用HSLA颜色：

代码：

CSS代码：

.box {
    width: fit-content;
    padding: 20px;
    background-color: #34538b;
    color: #fff;
    
}
.box > span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid;
    border-radius: 50%;
    vertical-align: top;
    transform: translate(.5px, 0);
}
.ele-problem {
    opacity: .6;
}
.ele-fixed {
    color: hsla(0,0%,100%,.6);
}

HTML代码：

<h4>有问题的情况（点击圈圈透明度变化）：</h4>
<p class="box">
    <span class="ele-problem"></span>
</p>
<h4>使用HSLA颜色：</h4>
<p class="box">
    <span class="ele-fixed"></span>
</p>