如何理解边界半径的工作方式答案

【问题标题】：How to understand the way border-radius work如何理解边界半径的工作方式
【发布时间】：2021-12-04 12:12:24
【问题描述】：

我有一个嵌套在 span 元素中的输入，所以我可以在它前面放一个美元符号，然后我尝试使用 border-radius 来圆其 4 个角。我做到了，但我不明白它是如何以及为什么这样工作的。

这是我尝试过的一些场景：

*只有class bill有border-radius：右边不是圆角，左边是圆角。 *两个边界半径：4 个角是圆形的。 *只有元素输入有边界半径：没有任何东西。

请告诉我为什么会这样，还有比我的代码更好的方法吗？

HTML

<p>Bill</p>
    <label class="bill">
         <span>$<input type="number" placeholder="0" /></span>
    </label>

CSS

.bill {
  background-color: red;
  border-radius: 7px;
  overflow: hidden;
}

input {
  background-color: red;
  border-radius: 7px;
  border: none;
  text-align: end;
}

【问题讨论】：

标签： html css input overflow border

【解决方案1】：

检查这个 -

HTML

 <p>Bill</p>
    <label class="bill">
      <span class="prefix">$</span>
      <input type="number" placeholder="0" />
    </label>

CSS -

.bill {
        display: block;
        background-color: red;
        border-radius: 7px;
        overflow: hidden;
        width: fit-content;
      }

      input {
        background-color: red;
        border: none;
        text-align: end;
        height: 40px;
      }
      input:focus {
        outline: none;
      }

工作示例here

【讨论】：

所以显示：块有所作为
@ĐứcSeven 是的！它有所作为。