如何在CSS中创建双底边框

Question

我想在标题的底部创建一个双边界,两条不同厚度的线条和两个之间的1px空间.特别是顶线,厚度为2px,底线为1px.

这是一个我想要达到美学目的的图像示例 -

使用此设计方面的其他网站 - http://www.rollingstone.com/

到目前为止,我已经尝试过 - "border-bottom:1px Solid#000;" 没有运气.我将不胜感激

非常感谢

Answer 1

你可以做这样的事情,因为它不需要额外的标记.

http://jsfiddle.net/aNc9X/

如下所示:http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

Answer 2

尝试使用 div 和 border-bottom 创建这些关键行，看看：

\n\n

http://jsfiddle.net/R2puF/

\n\n

.divA{\n  height: 1px;\n  border-bottom: 2px solid black;\n}\n.divB{\n  height: 1px;\n  border-bottom: 1px solid black;\n}\xe2\x80\x8b\n

\n\n

然后你的 HTML：

\n\n

<h1>Title Here</h1>\n<div class="divA"></div>\n<div class="divB"></div>\xe2\x80\x8b\n

\n