Question

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

这是我想要达到审美目标的图像示例 -

enter image description here

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

到目前为止，我已经尝试过 - “border-bottom：1px Solid＃000;”没有运气。我将不胜感激任何进一步的建议

非常感谢

Answer 1

你可以这样做，因为它不需要额外的标记。

http://jsfiddle.net/aNc9X/

enter image description here

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

Answer 2

两个问题：

您需要指定double而不是solid。
您需要指定3px而不是1px。（一个像素不足以显示双边框加上它们之间的间隙）

您的最终代码如下所示：

border-bottom: 3px double #000;

另请参阅：http://jsfiddle.net/qRUwk/

标准CSS无法以不同的厚度显示两个边框。为此，您需要有额外的标记。有些hacks可以使用before:和after:样式执行此操作，但它们会非常复杂。

Answer 3

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

http://jsfiddle.net/R2puF/

.divA{
  height: 1px;
  border-bottom: 2px solid black;
}
.divB{
  height: 1px;
  border-bottom: 1px solid black;
}

然后你的HTML：

<h1>Title Here</h1>
<div class="divA"></div>
<div class="divB"></div>

Answer 4

@Spudley - 我不知道边界的'双倍'值，这有用但不会给出更粗的上线。

Martin的答案比我最初的答案（现在已经编辑过）要好，因为它不使用额外的div，但你可以使用他的技术而不必使用这样的图像（这是Martin的小提琴的修改代码）：< / p>

<h1><span>Hello World!</span></h1>

h1 {font-size: 40px;
border-bottom: solid 2px black;
display: inline-block;}

h1 span{
border-bottom:solid 1px black;
padding: 3px;
}

jsfiddle here

顺便说一下，滚石网站主要使用双线边框的图像，而不是实际的CSS。我确定您知道，但您可以右键单击并从Web浏览器中选择Inspect元素以探索网站的构建方式。最好的学习方法！

Answer 5

这是解决方案，使用RollingStone.com中使用的背景图像

h1{font-size:40px;}
h1 span{
    background: transparent url(http://assets.rollingstone.com/images/fe/layout/oxfordLine.gif) scroll repeat-x bottom left;
    padding: 0 0 8px;
}

根据需要调整填充。

现场演示：http://jsfiddle.net/martinschaer/aQq96/

Answer 6

试试这个的 CSS

.title{ font-size:35px; font-weight:bold; border-bottom:1px solid #000; } .title span{ margin-bottom:4px; display:block; border-bottom:5px solid #000; }

<强> HTML

<div class='title'> Title Here <span class='border'></span> <div>

DEMO.

Answer 7

我发现这样做的最好方法是使用

<hr>

如果你申请一个班级，即：

<hr class="double">

然后CSS就像这样：

.double { 
  height: 3px; 
  border-top: 3px solid #ccc; 
  border-bottom: 1px solid #ccc; 
}

它会给你想要的效果。希望这有助于任何人继续寻找。

Answer 8

另一种选择是使用 border 和一些 box-shadow 技巧的组合。检查一下：

h1 {
  border-bottom: 4px solid black;
  box-shadow: 0px 3px 0px 0px white, 0px 4px 0px 0px black;
}

工作演示： http://codepen.io/jonathanhigley/pen/GpqMEm

Answer 9

以下是其他几种可能性：

方法＃01：

我们可以使用linear-gradient()使用transparent和纯黑色的组合填充标题的背景，使其看起来像一个轮廓。

必要的CSS：

.heading {
  /* Make heading inline-block so that its width becomes dependent on content. 
     Ohterwise heading will take full available width as it is a block element. */
  display: inline-block;
  vertical-align: top;

  // Draws the outer (thin) border...
  border-bottom: 1px solid black;

  // Draws the inner (thick) border...
  background: linear-gradient(to top, transparent 3px, black 3px,
                                      black 6px, transparent 6px) no-repeat;
}

工作示例：

＆＃13;

.heading {
  background: linear-gradient(to top, transparent 3px, black 3px, black 6px, transparent 6px) no-repeat;
  
  border-bottom: 1px solid black;

  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}

＆＃13;

<h1 class="heading">Title Here</h1>

＆＃13;

方法＃02：

使用CSS border-bottom属性绘制外部（细）轮廓。
使用看起来像边框的CSS linear-gradient()函数创建图像。
background-size CSS属性控制其大小。
使用background-position属性将其放置在所需位置。

必要的CSS：

.heading {
  // Draws the outer (thin) border...
  border-bottom: 1px solid black;

  // Draws the inner (thick) border...
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 100% 3px;  // Increase / Decrease 2nd value will change height of image
  background-position: left bottom 3px;
}

工作示例：

＆＃13;

.heading {
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left bottom 3px;
  
  border-bottom: 1px solid black;

  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}

＆＃13;

<h1 class="heading">Title Here</h1>

＆＃13;

<强>截图：

有用的资源：

如何在CSS中创建双底边框

9 个答案: