水平分隔线雕刻线

时间:2014-07-17 00:09:02

标签: html css css3

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

我试过

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

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

enter image description here

2 个答案:

答案 0 :(得分:3)

使用border-topborder-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

答案 1 :(得分:1)

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

尝试

groove

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