圆形 div 显示较小尺寸的边缘

Question

相关代码沙盒

我一直在我的应用程序中看到一种模式，当我创建圆形 div 时，它们有时在尺寸较小时看起来有边缘。请参阅下面突出显示的代码的图像。为什么会发生这种情况，有没有办法解决？谢谢。

索引.tsx：

import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

const App = () => (
  <>
    <div className="container">
      <div className="one" />
      <div className="one" />
      <div className="one" />
    </div>
    <div className="container">
      <div className="two" />
      <div className="two" />
      <div className="two" />
    </div>
    <div className="container">
      <div className="three" />
      <div className="three" />
      <div className="three" />
    </div>
    <div className="container">
      <div className="four" />
      <div className="four" />
      <div className="four" />
    </div>
  </>
);

render(<App />, document.getElementById("root"));

样式.css：

.one,
.two,
.three,
.four {
  background: red;
  border-radius: 50%;
}

.container {
  display: flex;
}

.one {
  width: 48px;
  height: 48px;
  margin: 48px;
}

.two {
  width: 16px;
  height: 16px;
  margin: 16px;
}

.three {
  width: 8px;
  height: 8px;
  margin: 8px;
}

.four {
  width: 4.8px;
  height: 4.8px;
  margin: 4.8px;
}

Answer 1

我可以使用radial-gradient.

.one,
.two,
.three,
.four {
  background: red;
  border-radius: 50%;
}

.container {
  display: flex;
}

.one {
  width: 48px;
  height: 48px;
  margin: 48px;
}

.two {
  width: 16px;
  height: 16px;
  margin: 16px;
}

.three {
  width: 8px;
  height: 8px;
  margin: 8px;
}

.four {
  width: 4.8px;
  height: 4.8px;
  margin: 4.8px;
}

.five {
  width: 5px; /* allow to some margin to prevent distortion. so, a little bit larger than 4.8px */
  height: 5px;
  margin: 4.8px;
  background: radial-gradient(
    circle at 50% 50%,
    red 0 2.4px, /* 2.4 is radius. our actual intended result 2.4 * 2 = 4.8 */
    transparent 2.6px 100% /* add a little bit transition (2.6 - 2.4 = 0.2px) for smoothness.  */
  );
}

.six {
  width: 2.7px;
  height: 2.7px;
  margin: 2.3px;
  background: radial-gradient(
    circle at 50% 50%,
    red 0 1.15px, /* for 2.3px width/height circle */ 
    transparent 1.35px 100%
  );
}

<div class="container">
  <div class="one"></div>
  <div class="one"></div>
  <div class="one"></div>
</div>
<div class="container">
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
</div>
<div class="container">
  <div class="three"></div>
  <div class="three"></div>
  <div class="three"></div>
</div>
<div class="container">
  <div class="four"></div>
  <div class="four"></div>
  <div class="four"></div>
</div>
<div class="container">
  <div class="five"></div>
  <div class="five"></div>
  <div class="five"></div>
</div>
<div class="container">
  <div class="six"></div>
  <div class="six"></div>
  <div class="six"></div>
</div>

为什么我们应该在 中添加过渡radial-gradient？

在下面的两个圆圈中，您可以更清楚地看到为什么我们需要添加过渡。

div {
  height: 300px;
  width: 300px;
  display: inline-block;
}

div:nth-child(1){
  background: radial-gradient(circle at 50% 50%, red 0 150px, transparent 150px 100%);
}

div:nth-child(2){
  /*                                             added 1px transition */
  background: radial-gradient(circle at 50% 50%, red 0 149px, transparent 150px 100%);
}

<div></div>
<div></div>