Html 如何在 CSS 中创建双底边框

How to create a double bottom border in CSS

提问by ANTLER66

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.

我想在标题底部创建一个双边框，其中两条线的粗细不同，中间有 1px 的空间。特别是一条粗细为 2px 的顶线和 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/

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

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

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

Many Thanks

非常感谢

回答by Max Girkens

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

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

http://jsfiddle.net/aNc9X/

http://jsfiddle.net/aNc9X/

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

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

回答by Spudley

Two problems:

两个问题：

1. You need to specify doublerather than solid.
2. You need to specify 3pxrather than 1px. (one pixel isn't enough to display a double border plus a gap between them)

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

Your final code would look like this:

您的最终代码如下所示：

border-bottom: 3px double #000;

See also : http://jsfiddle.net/qRUwk/

另见：http: //jsfiddle.net/qRUwk/

Standard CSS can't display the two borders at different thicknesses though. For that, you need to have additional markup. There are hacks that can do it with before:and after:styles, but they get quite complex.

但是，标准 CSS 无法以不同的厚度显示两个边框。为此，您需要有额外的标记。有一些技巧可以使用before:和after:样式来做到这一点，但它们变得非常复杂。

回答by hagope

Try creating these key lines with div's and border-bottom, check this out:

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

http://jsfiddle.net/R2puF/

http://jsfiddle.net/R2puF/

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

Then your HTML:

然后你的 HTML：

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

回答by Jonathan Garner

@Spudley - I wasn't aware of 'double' value for borders, that useful but doesn't give the thicker upper line.

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

Martin's answer is better than my initial answer (now edited) as it doesn't use an extra div, but you can use his technique without having to use an image like so (this is amended code from Martin's fiddle):

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

jsfiddle在这里

By the way, the rollingstone site uses mainly images of double-lined borders, not actual css. I'm sure you are aware, but you can right-click and choose Inspect element from your web-browser to explore how a site has been built. Best way to learn!

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

回答by Martin Schaer

Here's the solution usign the background image used in RollingStone.com

这是使用 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;
}?

Adjust the padding as needed.

根据需要调整填充。

Live demo: http://jsfiddle.net/martinschaer/aQq96/

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

回答by The Alpha

Try this CSS

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

HTML

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

DEMO.

演示。

回答by Elliot

I found the best way of doing this is with a

我发现最好的方法是使用

<hr>

If you apply a class to it i.e:

如果你应用一个类，即：

<hr class="double">

And then CSS like so:

然后 CSS 像这样：

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

It will give you the desired effect. Hope this helps anyone still looking.

它会给你想要的效果。希望这可以帮助任何仍在寻找的人。

回答by Jonathan

Another option is to use a combination of borderand some box-shadowtrickery. Check it:

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

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

WORKING DEMO:http://codepen.io/jonathanhigley/pen/GpqMEm

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

回答by Mohammad Usman

Here are a couple of other possibilities:

以下是其他几种可能性：

Approach #01:

方法#01：

We can use linear-gradient()to fill background of the heading with a combination of transparentand solid color like black so that it looks like an outline.

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

Necessary CSS:

必要的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;
}

Working Example:

工作示例：

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

---

---

Approach #02:

方法#02：

1. Draw the outer (thin) outline with CSS border-bottomproperty.
2. Create an image with CSS linear-gradient()function that looks like a border.
3. With background-sizeCSS property control its size.
4. Place it at the required position with background-positionproperty.

1. 使用 CSSborder-bottom属性绘制外部（细）轮廓。
2. 使用 CSSlinear-gradient()函数创建一个看起来像边框的图像。
3. 用background-sizeCSS 属性控制它的大小。
4. 将其放置在具有background-position属性的所需位置。

Necessary CSS:

必要的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;
}

Working Example:

工作示例：

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

---

---

Screenshot:

截屏：

---

---

Useful Resources:

有用的资源：

• Specification
• MDN
• CSS Tricks Tutorial

• 规格
• MDN
• CSS 技巧教程