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

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

这是DEMO

Answer 2

由于＃222已经太暗，所以看起来不太好。只有@ Dim13i建议的选项是使用黑色作为底色，但它看起来不会很明显。

如何让它变得更厚一点？

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

垂直CSS分频器颜色

2 个答案: