我在登陆页面上工作仅供个人使用,但我遇到了问题。我有一个带有边界半径的div,它叫做.popOut。边框半径适用于div的底部但不适用于标题部分,为什么?我该如何解决这个问题?此外,如果你知道如何使盒子阴影更轻一点,而不是那么黑暗,这将是伟大的!谢谢!
代码:
HTML:
*{margin:0; padding:0;}
body{
background: #CCC;
color:#000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{
margin: 0 auto;
width: 70%;
background:#ebebeb;
margin:auto;
}
.mainBack{
margin:auto;
background:white;
width:600px;
height:650px;
}
.popOut{
background:white;
width:80%;
height:600px;
margin:auto;
box-shadow:0px 0px 15px 0px;
border-radius:6px;
position:relative;
top:30px;
}
.mainHeader{
background:linear-gradient(#465BF6,#3149F2);
width:100%;
height:100px;
}

<html>
<head>
<meta charset="UTF-8">
<title>
Welcome!
</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="body">
<div class="mainBack">
<div class="popOut">
<div class="mainHeader"></div>
<div class="mainArea"></div>
<div class="mainAreaB"></div>
<div class="mainFooter"></div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
您遇到的问题是.mainHeader
没有border-radius:并且溢出.popOut
的边缘。
您可以通过为主标题指定border-radius来修复它:
.mainHeader{
background:linear-gradient(#465BF6,#3149F2);
width:100%;
height:100px;
border-radius:5px 5px 0 0;
}
JSFiddle Demo
或者隐藏.popOut
溢出:
.popOut{
background:white;
width:80%;
height:600px;
margin:auto;
box-shadow:0px 0px 15px 0px;
border-radius:6px;
position:relative;
top:30px;
overflow:hidden;
}
答案 1 :(得分:0)
您的.mainHeader
div覆盖了.popOut
div的边界半径。您可以将此行添加到.mainHeader
班级:border-radius: 6px 6px 0px 0px;
另外,为了让您的盒子阴影更轻,只需添加如下颜色:
box-shadow:#777 0px 0px 15px 0px;
以下是一个例子:
*{margin:0; padding:0;}
body{
background: #CCC;
color:#000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{
margin: 0 auto;
width: 70%;
background:#ebebeb;
margin:auto;
}
.mainBack{
margin:auto;
background:white;
width:600px;
height:650px;
}
.popOut{
background:white;
width:80%;
height:600px;
margin:auto;
box-shadow:#777 0px 0px 15px 0px;
border-radius:6px;
position:relative;
top:30px;
}
.mainHeader{
background:linear-gradient(#465BF6,#3149F2);
width:100%;
height:100px;
border-radius: 6px 6px 0px 0px;
}
&#13;
<html>
<head>
<meta charset="UTF-8">
<title>
Welcome!
</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="body">
<div class="mainBack">
<div class="popOut">
<div class="mainHeader"></div>
<div class="mainArea"></div>
<div class="mainAreaB"></div>
<div class="mainFooter"></div>
</div>
</div>
</body>
</html>
&#13;
答案 2 :(得分:0)
轻松添加overflow: hidden;
至.popOut
排序!
之所以发生这种情况,是因为你的蓝色div覆盖了popOut div,后者又覆盖了圆角。添加overflow:hidden;
会隐藏popOut容器之外的任何内容!
至于box-shadow,请看这里:http://css3gen.com/box-shadow/
即使有很多经验,我觉得它非常有用。您可以将rgba添加到框阴影中,如上面的链接所示,这使您可以更改颜色和不透明度!