CSS边框半径有问题

Question

我将以下代码添加到父 div .outertContainer 的 CSS 文件中，但边框半径仅影响顶部两个角，而不影响底部两个角。我似乎无法弄清楚。其他一切似乎都运行良好。

   *{
  background-color: white;
  margin: 0;
  padding: 0;
}

.outerContainer{
  position: absolute;
  border-radius: 9px;
  top:23%;
  right: 10%;
  width:30%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}

.input-form-control{
  margin-top: 20px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  line-height: 10px;
  font-size: 16px;
}
::placeholder {
  color: #99a3a4;
}
.submit-btn{
  margin-top: 18px;
  margin-left: 17px;
  margin-bottom: 65px;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 13px 20px;
  width: 92%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  
}

以下是html代码：

<div className="LoginPage">
     
        <div className="outerContainer">
                <form name="form">
                    <div className="emailLabelInput">
                        <input type="text" className="login-form-control" name="email" placeholder="Email address"/>
                    </div>
                    <div className="passwordLabelInput">
                        <input type="password" className="login-form-control" name="password" placeholder="Password"/>
                    </div>
                    <div className="form-group">
                        <button className="submit-btn">Log in</button>

                    </div>
                </form>
            </div>
          </div>

Answer 1

你的问题是你有* { background: white; } 这使得所有元素的背景都是白色的。由于form 与outerContainer 一样大并且没有border-radius，因此它有效地掩盖了应用于outerContainer 的border-radius。所以你有两个选择来解决这个问题：

1 — 删除 * { background: white; }。这在大多数情况下都有效，只是两个输入仍然位于outerContainer 的左上角，当然仍然覆盖那个角落。如果您的位置稍有不同，这将起作用。

2 — 将 padding: 10px 添加到 outerContainer。这将为outerContainer 提供一点“呼吸空间”，并防止form 覆盖角落。请参阅下面的 sn-p。

*{
  background:white;
  margin: 0;
  padding: 0;
}

.LoginPage{
  height:100vh;
  width:100vw;
}

.outerContainer{
  padding:10px; /* Added to show radius */
  position: absolute;
  border-radius: 9px;
  top:23%;
  right: 10%;
  width:30%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}

.input-form-control{
  margin-top: 20px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  line-height: 10px;
  font-size: 16px;
}

::placeholder {
  color: #99a3a4;
}

#error-message{
  border: 1px solid #ff7f50;
  margin-top: 10px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border-radius: 4px;
  line-height: normal;
  font-size: 15px;
}

.submit-btn{
  margin-top: 18px;
  margin-left: 17px;
  margin-bottom: 65px;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 13px 20px;
  width: 92%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

<div class="LoginPage">
  <div class="outerContainer">
    <form name="form">
      <div class="emailLabelInput">
        <input type="text" class="login-form-control" name="email" placeholder="Email address"/>
      </div>
      <div class="passwordLabelInput">
        <input type="password" class="login-form-control" name="password" placeholder="Password"/>
      </div>
      <div class="form-group">
        <button class="submit-btn">Log In</button>
      </div>
    </form>
  </div>
</div>