使用RGBA值时出现抗锯齿边框半径问题

Question

我遇到了一个问题，当我使用border-radius与rgba颜色值（例如rgba（255,255,255，.8））结合使用，然后使用box-shadow使框看起来有点像羽毛时，我发现角落不是完整的，如下图所示。

左上角的细节：

可以看出，当使用border-radius与其他CSS元素结合使用时，会在边缘产生奇怪的透明边缘。

我尝试了很多方法，但没有太大的成功。这是我的一份代码尝试，因为我想在另一个项目中尝试，但只是在这里复制了一下：https://jsfiddle.net/01u7gbxa/1/

该代码本身似乎可以应用于任何对象，并得到相同的结果：

  background:rgba(0,0,0,.8);
  box-shadow:0 0 15px 30px rgba(0,0,0,.8);
  border-radius:60px;

有人知道这是否有可能完全修复吗？

提前感谢进一步的信息。

- Rafaël De Jongh

---

它的最终结果是什么？ - Adem yalçın

你可以通过 border: solid 1px rgba(0,0,0,0.8); 强制边框与背景完全一致 - https://jsfiddle.net/a6wb28cr/1/ - Luís P. A.

@Luis P. A. 那是我的第一反应，但由于我正在使用不透明度，它将成为其余部分之上的边框，这将导致元素具有较暗的边框，并且由于它仅出现在角落而不是整个div周围的边框，因此它会累加并使其看起来不正确。 - Rafaël De Jongh

Answer 1

你可以使用模糊滤镜来实现同样的效果。将其应用于伪元素，以免影响任何潜在内容。

body {
  background: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.box {
  width: 500px;
  height: 200px;
  border-radius: 60px;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0, 0, 0, .8);
  border-radius: inherit;
  filter: blur(10px);
}

<div class="box"></div>

- Temani Afif

---

有趣的概念，如果内容没有先前和之后，这可能会起作用。因此，虽然这可能是一种替代解决方案，但我仍然想知道如何修复这个渲染问题，如果有可能的话。 - Rafaël De Jongh

@RafaëlDeJongh 我也很想看到任何可能的解决方案，但恐怕没有一个。您仍然可以分享您真正使用伪元素的用例，我可能会找到重构整个代码的解决方案。 - Temani Afif

Answer 2

请更改这些：

  background:rgba(0,0,0,.8);
    box-shadow:0 0 15px 30px rgba(0,0,0,.8);

转换为这些：

   background-color: #000;
   box-shadow:0 0 15px 30px #000;
   opacity : 0.8;

- Hammed

---

啊，看起来就是这样了！为什么它不能在组合语法中工作呢？ - Flink

在回答之前，您应该检查它是否有效。https://jsfiddle.net/6jd3Lgfc/ 在FF中存在相同的问题+任何内容也将以opacity:0.8显示。我认为这会使情况更糟。 - G-Cyrillus

谢谢您的提问，老实说我没有答案，但我建议您始终编写稳定的代码以避免这些问题和跨浏览器兼容性问题。 - Hammed

@Hammed那样做不会有帮助，这个示例只是用来展示问题的，我不能在那个div中使用透明度，因为它也会应用于div内的一切内容，在我的用例中，它包含文字或图片，那么透明度也会降低，这不是我想要的。我可以利用透明度和内容的变通方法，但这并不是真正的问题所在。 - Rafaël De Jongh

我按照他描述的方式解决了这个例子，明天我会添加另一种解决方案。 - Hammed