Firefox border-radius 白边

问题描述

Firefox 中有一个令人讨厌的事情，它无法处理圆角元素的剪辑（抗锯齿？），尤其是在有多个背景的情况下。在某些情况下（我猜是非绝对元素），它可以通过在类中设置 background-clip: content-box 来解决，但在其他情况下，即使具有任何其他属性，也不能以这种方式求解。虽然，Chrome 不会产生这个问题（或者更好地处理引擎盖下的剪辑）。这里有一些基于我的场景的示例，我设法在不同浏览器中使用片段和结果屏幕截图重新创建了这些示例。

请不要让我摆脱多种背景和混合模式，因为我需要它，因为 css 不支持渐变过渡。

body {
  margin: 0;
}
.wrapper {
  position: relative;
  padding: 20px;
  background-color: #2B3351;
}
.child {
  display: inline-block;
position: relative;
padding: 24px 48px;
text-align: center;
font-family: "Raleway",sans-serif;
font-weight: 900;
font-size: 18px;
text-transform: uppercase;
align-items: center;
color: rgba(255,255,0.6);
border-radius: 34px;
background-color: #181B34;
background-image: linear-gradient(160deg,#e6e7f9 11.77%,#ebebfb 74.75%);
background-blend-mode: multiply;
box-shadow: -10px -10px 15px rgba(165,206,0.1),10px 10px 20px rgba(0,0.35),inset 0 0 0 rgba(165,0),inset 0 0 0 rgba(0,0);
margin: 24px 0;
background-clip: content-box;
  
}
.absolute {
  position: absolute;
  background-color: #030b33bf;
  background-image: linear-gradient(160deg,#e7ecfd,#FfffFF);
  background-blend-mode: multiply;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(150px,-60px);
  box-shadow: -3px -3px 5px rgba(0,6,39,4px 4px 8px rgba(0,.35);
background-clip: border-box;
}

<div class="wrapper">
  <div class ="child"></div>
  <div class="absolute"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

border-radius firefox html