如何去除锯齿？

Question

我的代码 - Fiddle

＆＃13;

＆＃13;

body{
  background: url('http://i.imgur.com/RECDV24.jpg');
  background-size: cover;
}
div{
  width: 150px;
  height: 150px;   
  background-image: radial-gradient(circle at 0 0, transparent 28px, tomato 28px);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

如何删除锯齿？

谢谢，我很乐意为您提供帮助！

Answer 1

在圆形元素上使用大box-shadow的不同方法：

body {
  background: url('https://i.imgur.com/RECDV24.jpg');
  background-size: cover;
}

.bitten {
  height: 150px;
  overflow: hidden;
  position: relative;
  width: 150px;
}

.bitten::before {
  border-bottom-right-radius: 100%;
  box-shadow: 0 0 0 1000px tomato;
  content: '';
  height: 28px;
  position: absolute;
  width: 28px;
  z-index: -1;
}

<div class="bitten"></div>

Answer 2

在某些浏览器中，您可以通过没有渐变的锐边来防止锯齿。因此，而不是transparent 28px, tomato 28px，您可以使颜色之间的过渡更平滑，例如1px。

body{
  background: url('https://i.imgur.com/RECDV24.jpg');
  background-size: cover;
}
div{
  width: 150px;
  height: 150px;   
  background-image: radial-gradient(circle at 0 0, rgba(255,99,71,0) 28px, rgba(255,99,71,255) 30px);
}

<div></div>

但这并不适用于所有地方。有关更加可靠的方法，请参阅另一个答案。