水平分隔线雕刻线

Question

我一直在努力实现水平划分，看起来像CSS3中的刻线。

我试过

border-bottom: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.5);

用一些颜色和不透明度来讨论，但我似乎无法得到正确的组合。我可以轻松地在photoshop上做到这一点。 我想要实现的是：

Answer 1

使用border-top和border-bottom属性，您可以单独设置值。 例如：

hr {
    border: 0; /* reset the default stylesheet */
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-top: 1px solid rgba(0,0,0,0.5);
}

<强> WORKING DEMO

Answer 2

border-style的{​​{1}}意味着这样做。

尝试

groove

凹槽的反面是hr { border-bottom: 2px groove; } ，还有样式ridge和inset可以尝试类似或其他效果。