如何在 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

两个问题：

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

您的最终代码如下所示：

border-bottom: 3px double #000;

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

标准 CSS 不能以不同的粗细显示两个边框。为此，您需要有额外的标记。有一些技巧可以用before: 和after: 样式做到这一点，但它们变得相当复杂。

Answer 3

尝试使用 div 和边框底部创建这些关键行，看看这个：

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

试试这个 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 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

@Spudley - 我不知道边框的“双”值，这很有用，但没有给出更粗的上线。

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

<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。我相信您知道，但是您可以右键单击并从您的网络浏览器中选择检查元素来探索网站是如何构建的。最好的学习方式！

Answer 7

另一种选择是结合使用 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 8

这里有几个其他的可能性：

方法 #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;
}

工作示例：

.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;
}

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

---

方法 #02：

1. 使用 CSS border-bottom 属性绘制外部（细）轮廓。
2. 使用 CSS linear-gradient() 函数创建一个看起来像边框的图像。
3. 用background-size CSS 属性控制它的大小。
4. 使用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;
}

工作示例：

.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;
}

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

---

截图：

---

有用的资源：

• Specification
• MDN
• CSS Tricks Tutorial

Answer 9

我发现最好的方法是使用

<hr>

如果你对它应用一个类，即：

<hr class="double">

然后是这样的 CSS：

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

它会给你想要的效果。希望这对仍在寻找的人有所帮助。