CSS边界半径有问题

Question

我正在将以下代码添加到父div的CSS文件中。outertContainer，但边界半径只影响顶部两个角，而不影响底部两个角。我似乎想不通。其他一切似乎都很好。

*{
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覆盖角落。请参阅下面的片段。

*{
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>