使用 CSS 制作完美的圆形 div

Question

如您所见，here 我有两个 div。每个 div 中都有不同的文本。两个 div 都具有相同的样式，但是 ID 为 days 的 div 是完美的圆形，而 ID 为 hour 的 div 就像一个椭圆形。如何使 hour 也成为圆形？

这是我的代码：

 .component {
   color: white;
   border: 1px solid white;
   border-radius: 50%;
   display: inline;
   padding: 20px;
 }
 body {
   background-color: black;
   margin: 20px;
 }

<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

Answer 1

这对我有用，不确定这是否是您正在寻找的解决方案：

<div class="component" id="hour">&nbsp;5&nbsp;</div>

Answer 2

对于这种情况，您必须使用 fixed width。由于内容（71 对 5），第一个 div 比第二个 div 具有更高的宽度。

Jsfiddle

.component {
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: inline-block;
  width: 60px;
  text-align: center;
  padding: 20px 0;
}
body {
  background-color: black;
  margin: 20px;
}

<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

Answer 3

.component{
   color:white;
   border:1px solid white;
   border-radius:50%;
   display:inline-block;
   height:50px;
   line-height:50px;
   width:50px;
   text-align: center;
}

将您的 css 更新为此。干杯! 请参阅示例 fiddle：Circular Div

Answer 4

这是因为当你说这样的话时：

border-radius: 50%;

根据 MDN 文档 (https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)"percentages for the horizontal axis refer to the width of the box"

因此，由于您是内联显示元素，因此 .component 元素的宽度恰好是其内容的宽度。解决方案之一是显示元素 inline-block 并强制它们为正方形，以便应用 border-radius:50% 属性将使它们成为完美的圆，无论它们的内容大小如何。

这是我建议的解决方案：

1) 显示 .components 元素内联块，以便我可以对它们的宽度和高度进行操作。

2) 给它们一个恰好与内边距大小相同的宽度和高度，这样它们就不会伸展得太远。

3) 应用 text-align: center 以确保数字正确居中（第二个数字有问题）。

这是我建议的代码演示：

.component{
    color:white;
    border:1px solid white;
    border-radius:50%;
    display:inline-block;
    padding:20px;
    height: 20px;
    width: 20px;
    text-align:center;
}

body {
   background-color: black;
   margin: 20px;
 }

<body>
  <div class="component" id="days">71</div>
  <div class="component" id="hour">5</div>
</body>

希望对您有所帮助！

使用 CSS 制作完美的圆形 div

Making perfect circular divs with CSS

html

css

css-shapes