垂直 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;
}