html - 垂直 CSS 分隔线颜色

Question

所以我看到了这个http://cre8tivenerd.com/demos/css/Line-separator.html并想创建一个具有“按下”效果的分隔线。问题是，我不知道分隔线颜色对我来说应该是什么，测试它并没有得到相同的效果。我的背景颜色是#222222。任何可以帮助我并可能解释我如何“计算”我应该为分隔线使用哪些颜色的人？

Answer 1

你可以很容易地得到这样的效果：

<div class="vDivider"></div>

CSS：

.vDivider {
    width: 80%;
    height: 1px;
    margin: 10px auto;
    background: #434343;
    border-bottom: 1px solid black;
}

背景颜色和底部边框之间的对比产生了这种效果。

这是一个演示

Answer 2

它看起来不太好，因为#222 已经太暗了。@Dim13i 建议的唯一选项是使用黑色作为底部颜色，但它看起来并不明显。

再厚一点怎么样？

.line-separator {
    background: none repeat scroll 0 0 #777;
    border-bottom: 2px solid #000;
    height: 2px;
}