如何在CSS中创建双下边框 [英] How to create a double bottom border in CSS

问题描述

我想在标题的底部创建一个双层边框，其中包含两行不同粗细和1px间距的空间。特别是一个厚度为2px，底线为1px的顶部线。

下面是一个我想要达到美观的图像示例 -

其他使用此设计方面的网站 -

I want to create a double boarder at the bottom of a title with two lines of different thicknesses and a 1px space in between. Specifically a top line with a thickness of 2px and a bottom line of 1px.

Here is an image example of what I am aiming to achieve aesthetically -

Other website which have used this design aspect - http://www.rollingstone.com/

So far I have tried - "border-bottom: 1px Solid #000;" with no luck. I would appreciate any further suggestions

Many Thanks

解决方案

You could do something like this, as it requires no extra markup.

http://jsfiddle.net/aNc9X/

as seen here: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

这篇关于如何在CSS中创建双下边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！