使用CSS圆角将标题扩展到页面顶部
[英]Extend header to top of page with CSS rounded corners
问题描述
我有一个带有圆角包装的网页。 包装器中的第一件事是页眉，但在它上面有一个白色空间，角落在哪里。 我希望蓝色标题从包装器的顶部开始，因此顶部没有空白区域。 我不知道这是否可行，但任何帮助将不胜感激！ 这是（简化）代码。 我使用内联CSS发布这个。
HTML
<div id="wrapper">
<div id="header">
<h1>Test Page</h1>
</div>
<!--header-->
<div id="nav"> <a href="index.html">Home</a> <a href="index.html">Link 1</a> <a href="index.html">Link 2</a> <a href="index.html">Link 3</a> <a href="index.html">Link 4</a>
</div>
<!--nav-->
<div id="main">
<p>This is the test page.</p>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!--main-->
</div>
<!--wrapper-->
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
h1 {
line-height: 200%;
margin-bottom: 0px;
}
a {
padding-left: 10px;
padding-right: 10px;
color: #000000;
}
#wrapper {
background-color: #FFFFFF;
min-width: 760px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #40ebff;
color: #FFFFFF;
padding-left: 5px;
}
#nav {
font-weight: bold;
background-color: #ffdab2;
padding: 5px;
}
#main {
padding-left: 20px;
padding-right: 20px;
}
FIDDLE> http://jsfiddle.net/znfa0Lkf/
6 个解决方案
解决方案1
2 2014-09-04 13:42:00
在你的代码中添加这个
* {
padding: 0;
margin: 0;
}
并添加到你的包装overflow:hidden;
解决方案2
1 已采纳 2014-09-04 13:40:40
你需要添加margin-top:0; 那个h1风格，因为它迫使它失败了。
然后，你需要添加
border-top-left-radius:25px;
border-top-right-radius:25px;
到#header 。
或者，添加overflow:hidden; 改为#wrapper 。 正如Woodrow Barlow在评论中所说：
如果你试图完美匹配彼此顶部的圆角，一些浏览器将绘制一个底层元素的条子（渲染不完美）
附注：如果将px设置为0则无需添加px 。 例如，你可以只有margin-top:0; ，不是margin-top:0px 。
解决方案3
1 2014-09-04 13:49:21
正如已经建议的那样，您将受益于简单的CSS重置 。 默认情况下，浏览器会向某些元素添加某些填充和边距 - 通过明确否定它，您可以定义自己的填充和边距。 另一个优点是，由于“默认值”可能因浏览器而异，因此您可以获得更加一致的结果。
重置很简单。 将其添加到CSS的顶部：
* {
margin:0;
padding:0;
}
并添加一些更改，使您的页面按照您的预期方式。 首先，我们将添加margin:10px （根据需要调整）到#wrapper （这使得你的圆角盒子就像以前一样，而不是砸到页面的顶部）。 接下来，将overflow:hidden添加到#wrapper 。 由于#header没有圆角，因此#wrapper通常会有方角overflow:hidden ，但overflow:hidden阻止它。
这是一个现场演示 。
请注意，如果您不想，则不需要使用CSS重置。 如果您愿意，可以在h1选择器中添加margin-top:0 。 在这种情况下，您不需要向#wrapper添加margin ，但您仍然需要设置overflow:hidden 。 这是该版本的现场演示 。
解决方案4
0 2014-09-04 13:39:03
这将有助于您：
*{
margin:0;
padding:0;
}
默认情况下，包括正文在内的多个元素都有边距和填充，因此您可以看到空间并将边距和填充值设置为0，所有选择器（*）将删除边距和填充值，或者说文档中没有空格。
解决方案5
0 2014-09-04 13:42:13
问题1>“包装”周围的边距
由于“ <body> ”中的默认边距，您获得了“Wrapper”周围的边距所有您需要做的是从“ <body> ”中删除默认边距和填充
问题2>“Blue Header”上方的边距
添加margin-top: 0px; 由于它采用<h1>的默认保证金
问题3>从H1中删除边距时删除半径
添加overflow:hidden; 到“#wrapper”所以<h1>并且header保留在wrapper并且不会否决该样式。
这是最终修复补充：
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
margin:0 auto; /*FIX ADDED*/
padding:0; /*FIX ADDED*/
}
h1 {
line-height: 200%;
margin-bottom: 0px;
margin-top: 0px; /*FIX ADDED*/
}
#wrapper {
background-color: #FFFFFF;
min-width: 760px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid #a1a1a1;
border-radius: 25px;
overflow:hidden; /*FIX ADDED*/
}
这是工作小提琴> http://jsfiddle.net/0w646ba1/
**对不起，错过了添加标题上方空格的修复程序。
解决方案6
0 2014-09-04 13:46:35
#header h1
{
background-color: #40ebff;
color: #FFFFFF;
padding-left: 5px;
margin:0;
border-top-left-radius:25px;
border-top-right-radius:25px;
}
Web 页面平滑圆角 CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.