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>