边界半径不适用于div的顶部

我正在开发一个仅供个人使用的登录页，但遇到了一个问题。我有一个带边框半径的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>

您的.mainHeaderdiv覆盖了.popOutdiv的边界半径。您可以将此行添加到.mainHeader class中：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; 
}

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

易于添加，overflow: hidden;到.popOut

排序！

之所以会发生这种情况，是因为您的蓝色div覆盖了popOutdiv，而popOutdiv又覆盖了圆角。添加overflow:hidden;会隐藏popOut容器之外的任何内容！

至于盒子阴影，请看这里：http://css3gen.com/box-shadow/

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

您遇到的问题是.mainHeader没有边界半径：并且溢出了.popOut的边缘
你可以通过给主标题一个边界半径来修复它：

.mainHeader{
        background:linear-gradient(#465BF6,#3149F2);
        width:100%;
        height:100px;
        border-radius:5px 5px 0 0;
    }

JSFiddle演示
或者通过隐藏.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演示

相关内容

最新更新

热门标签：