如何理解 border-radius 的工作方式

Question

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

以下是我尝试过的一些场景：

*只有 class bill 有 border-radius：右边的角不是圆的，左边的是。 *有两个 border-radius：4 个角是圆的。 *只有元素输入有 border-radius: nothing is rouned.

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

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;
}

Answer 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

如何理解 border-radius 的工作方式

How to understand the way border-radius work

html

css

input

border

overflow