当不透明度应用于具有边框的对象时,Chrome似乎不一致地使用渲染边框。当边框为1px时,此问题尤其明显,当边框位于像素之间时会出现此问题。但是,如果未应用“不透明度”,则Chrome会始终渲染边界。
.btn {
margin: 0;
padding: 12px 24px;
cursor: pointer;
font: sans-serif;
font-size: 14px;
background-color: transparent;
color: rgba(0, 0, 0, 0.7);
border: 1px solid currentColor;
border-radius: 3px;
}
.opacity {
opacity: 0.5;
}
<div style="margin-bottom: 4px">
<button class="btn">button</button>
<button class="btn">button</button>
<button class="btn">button</button>
</div>
<div>
<button class="btn opacity">button</button>
<button class="btn opacity">button</button>
<button class="btn opacity">button</button>
</div>
这取决于缩放级别等,但您应该能够在第二行按钮中看到不一致的边框宽度。这个问题是特定于Chrome的,我无法用Safari复制它。
问题:
你知道有什么有用的css属性可以帮助解决这个问题吗?
编辑:
这是放大的屏幕截图
