Question

如何设置此圆形div的样式？如您所见，它不是纯正的圆形，它略有不同，不均匀但也很圆。

我正在尝试border-radius，但看起来并不漂亮，似乎有结块

.circle {
  border-radius: 42%;
  transform: rotate(46deg);
  height: 70px;
  width: 70px;
  background: green;
}

<div class="circle"></div>

Answer 1

将边框半径设置为宽度/高度的一半。您必须非常聪明地使文本和图像适应圈子。

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<h1> Header </h1>
<p> Hi
<div class="circle" id="circle"> ! </div>
</p>
</body>
</html>

CSS：

.circle {
  border-radius: 100px;
  height: 200px;
  width: 200px;
  background: green;
  margin: auto;
  text-align:center;
}

结果：

Answer 2

在我看来，这里的问题是您的圈子的大小大于您要模仿的圈子的大小。对大小，半径和旋转的一些修改可以得到：

.circle {
  border-radius: 44%;
  transform: rotate(45deg);
  height: 66px;
  width: 66px;
  background: green;
  margin: auto;
}

<div class="circle"></div>

利用Photoshop，将一个圆环粘贴到另一个圆环上可以得到几乎完美的复制效果。

Answer 3

.circle {
  border-radius: 50%;
  transform: rotate(46deg);
  height: 100px;
  width: 100px;
  background: green;
}

<div class="circle"></div>

现在尝试执行此操作，它肯定会工作。

如何设置圆形div的样式？

3 个答案: