border-radius不适用于div的顶部

时间:2015-04-01 00:07:38

标签: html css css3

我在登陆页面上工作仅供个人使用,但我遇到了问题。我有一个带有边界半径的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;
&#13;
&#13;

3 个答案:

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

JSFiddle Demo

答案 1 :(得分:0)

您的.mainHeader div覆盖了.popOut div的边界半径。您可以将此行添加到.mainHeader班级:border-radius: 6px 6px 0px 0px;

另外,为了让您的盒子阴影更轻,只需添加如下颜色:

box-shadow:#777 0px 0px 15px 0px;

以下是一个例子:

&#13;
&#13;
*{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;
&#13;
&#13;

答案 2 :(得分:0)

轻松添加overflow: hidden;.popOut

排序!

之所以发生这种情况,是因为你的蓝色div覆盖了popOut div,后者又覆盖了圆角。添加overflow:hidden;会隐藏popOut容器之外的任何内容!

至于box-shadow,请看这里:http://css3gen.com/box-shadow/

即使有很多经验,我觉得它非常有用。您可以将rgba添加到框阴影中,如上面的链接所示,这使您可以更改颜色和不透明度!