1

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, 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, 255, 0.1), 10px 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 rgba(165, 206, 255,0), inset 0 0 0 rgba(0,0,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, 0), 4px 4px 8px rgba(0, 6, 39, .35);
background-clip: border-box;
}
<div class="wrapper">
  <div class ="child"></div>
  <div class="absolute"></div>
</div>

4

0 回答 0