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

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

演示。

Answer 4

尝试使用 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 5

我发现最好的方法是使用

<hr>

如果你应用一个类，即：

<hr class="double">

然后像这样的CSS：

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

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

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在这里

顺便说一句，rollingstone 网站主要使用双线边框的图像，而不是实际的 css。我相信您知道，但是您可以右键单击并从您的网络浏览器中选择检查元素来探索网站是如何构建的。最好的学习方式！

Answer 7

这是使用 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 8

另一种选择是结合使用边框和一些盒子阴影技巧。核实：

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

工作示例：

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

---

截屏：

---

有用的资源：

• 规格
• MDN
• CSS技巧教程