边界半径圆答案

【问题标题】：Border radius circle边界半径圆
【发布时间】：2020-03-02 05:32:59
【问题描述】：

我有这个代码：

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

我想在我的跨度上画一个完美的圆圈。我尝试了border-radius: 50%;，但它不起作用。

感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

你可以通过给跨度一个固定的宽度和高度来做到这一点：

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

【讨论】：

添加等于高度的行高 - 使文本垂直居中

【解决方案2】：

您需要在跨度上预定义宽度和高度才能使其变圆。

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width:40px;
    height:40px;
    padding-left:10px;
    box-sizing: border-box;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

【讨论】：

【解决方案3】：

添加line-height和width：

span {
    background-color: #F00;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    line-height: 25px;
    text-align: center;
}

【讨论】：

【解决方案4】：

使用此代码。 HTML：

<span>
        <p>25</p>
        </span>

        <span>
        <p>08</p>
        </span>

CSS：

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
}

【讨论】：

【解决方案5】：

边框半径：50% 和填充

document.addEventListener('DOMContentLoaded', () => {
  let el = document.querySelector('#wrapper .container');
  
  setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);

#wrapper {
  display: flex;
  justify-content: center;
}

#wrapper .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 16px;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 50%;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 
  0 8px 10px 1px rgba(0, 0, 0, 0.14), 
  0 3px 14px 2px rgba(0, 0, 0, 0.12);
  transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
  will-change: margin-top, box-shadow, transform;
  user-select: none;
  cursor: pointer;
}

#wrapper .container:hover:not(:active) {
  box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1), 
  0 2px 10px 0px rgba(0, 0, 0, 0.08), 
  0 0px 10px 0px rgba(0, 0, 0, 0.08);
}

#wrapper .container:active {
  transform: scale(1.4) translateY(5px);
  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 
  0 18px 28px 2px rgba(0, 0,0 , 0.14), 
  0 7px 34px 6px rgba(0, 0, 0, 0.12);
}

<div id="wrapper">
  <div class="container">
    <span>10</span>

    <span>3</span>
  </div>
</div>

【讨论】：

【解决方案6】：

看起来您在span 中错误地嵌套了paragraph 元素，这与HTML5 spec 相违背，因为span 在那里被定义为一个元素，描述了内容模型作为短语内容，并且：

大多数归类为Phrasing Content 的元素只能包含本身归类为短语内容的元素，而不是任何流内容。

并且由于paragraph 元素不属于短语内容 列表，因此您可以为此使用div 而不是span，前提是您需要确保语义正确。

所以回到你的问题，它可以重写为：

HTML：

<div>
    <p>25</p>
    <p>08</p>
</div>

CSS：

p {
    margin: 0;
    text-align:center;
}
div {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width:50px;
    height:50px;
    line-height:25px;
}

使用border radius 设置为50% 来实现圆的一般规则是，您需要确保此类元素的内容具有相同的宽度和高度。您可以通过在 css 中修复这些值来实现。

这是JsFiddle 介绍的。

【讨论】：