Как создать идеальный делитель пикселей с помощью CSS-рамки

У меня есть меню с черным фоном и подменю с серым фоном.

Теперь я хотел бы иметь идеальный пиксельный разделитель между ними.

Но я понятия не имею, какой цвет границы я должен использовать, чтобы получить идеальный пиксельный делитель. Может кто-нибудь мне помочь?

Вот 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/

Благодарю.

Источник

3 ответа

Решение

Добавить нижнюю границу к .mainnav

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

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

Источник

Я не думаю, что вам нужен какой-либо пиксель с прямым делителем! Это хорошо, как есть. В любом случае, я не думаю, что этот сайт предназначен для вопросов такого типа, у вас должен быть технический вопрос, а не вопрос о том, как сделать все хорошо.

Источник

Я добавлю пунктирную линию между ними

Добавьте следующую строку в mainnav css

border-bottom:1px dotted #fff;

Проверьте это на JSFiddle

http://jsfiddle.net/ruUgk/2/
Источник
Другие вопросы по тегам