html - 如何使用CSS边框创建像素完美分隔线

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        6年前关闭。



我有一个菜单，背景为黑色，子菜单为背景灰色。

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

但是我不知道应该使用哪种边框颜色来获得像素完美的分隔线。谁能帮我？

这是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/

谢谢。

最佳答案

在.mainnav下方添加边框

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

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