Question

我有一个背景黑色菜单和带灰色背景的子菜单。

现在我希望它们之间有一个像素完美的分隔线。

但是我不知道应该用什么边框颜色来获得像素完美的分隔线。任何人都可以帮助我吗？

这是html代码

<!DOCTYPE html>
<html>
<body>
<div class="mainnav">
    <p> This is main nav </p>
</div>
<div class="subnav">
     <p> This is sub nav </p>
</div> 
</body>
</html>

这是我的css

.mainnav {
width:100%;
    height:60px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
}
.mainnav p {
padding-top:20px; 
}
.subnav p {
padding-top:10px; 
}
.subnav {
width:100%;
    height:45px;
    background-color:#333;
    color:#ffffff;
    text-align:center;
}

这是我的jsfiddle。

http://jsfiddle.net/ruUgk/

感谢。

Answer 1

向.mainnav

添加底部边框

.mainnav {
    border-bottom:1px solid #fff;
}

http://jsfiddle.net/ruUgk/1/

Answer 2

我不认为你需要任何像素直立的devider！这很好。无论如何，我不认为这个网站是针对这类问题的，你在这里应该有一个技术问题，而不是如何让事情看起来很好的问题。

Answer 3

我会在它们之间添加一条虚线

将以下行添加到mainnav css

border-bottom:1px dotted #fff;

在JSFiddle上查看这个

http://jsfiddle.net/ruUgk/2/

如何使用css边框创建像素完美分隔符

3 个答案: