如何在CSS中设置双行边界，每一行都用不同的颜色，不使用背景图像?

How to make a double line border in CSS, each line in a different color without using background-image?

如何在CSS中创建双行边框，每一行使用不同的颜色，而不使用背景图像?

For example like this:

例如像这样:

Code:

代码:

<h2> heading 2 </h2>
<p> paragraph text </p>

<h2> heading 2 </h2>
<p> paragraph text </p>

Note: I'm not considering IE 8, 7, 6

注意:我没有考虑IE 8,7,6

11 个解决方案

#1

I just found the way on google search and it's working good for me.

我刚刚找到了谷歌搜索的方法，它对我很有用。

h2 {
    border-bottom: 1px solid blue;
    box-shadow: 0 1px 0 red;}

Source : http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

来源:http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

Edit : I found another way to achieve multiple border using CSS 2.1 pseudo-elements

编辑:我找到了另一种使用CSS 2.1伪元素实现多个边框的方法

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+

支持:Firefox 3.5+， Safari 4+， Chrome 4+， Opera 10+， IE8+

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

#2

You can do it with the :after pseudo element:

可以使用:after pseudo元素:

http://jsfiddle.net/aCgAA/

http://jsfiddle.net/aCgAA/

h2 {
padding: 5px 0;
border-bottom: solid 3px pink;
font-weight: bold;
position: relative;
margin-bottom: 8px;
}

h2:after {
content: '';
border-bottom: solid 3px blue;
width: 100%;
position: absolute;
bottom: -6px;
left: 0;
}

This degrades gracefully to a single line if the :after selector is not available.

如果:after selector不可用，则该选项优雅地降级为一行。

#3

it is possible in CSS3 very easily. try with the following code

这在CSS3中很容易实现。试试下面的代码

h2
{
  border-bottom: 2px solid blue;
  -moz-box-shadow: 0px 2px 0px #ff0000; /* Firefox 3.6 and earlier */
  -webkit-box-shadow: 0px 2px 0px #ff0000; /* Safari and Chrome */
  box-shadow: 0px 2px 0px #ff0000;
}

#4

border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;

#5

I don't think there is a way to do this without an additional element.

我不认为有一种方法可以在没有其他元素的情况下做到这一点。

There's outline, but it doesn't allow a outline-bottom rule: An outline can only be identical on all four sides.

有大纲，但不允许有底线规则:大纲只能在四个方面都是相同的。

The :after pseudo-class will allow the adding of text content only, no elements.

伪类之后将只允许添加文本内容，不允许添加元素。

Here's how to do it with an additional hr.

这里有一个额外的人力资源。

#6

Have you try add a <span> between <h2> and <p> with the following css:

是否尝试使用以下css在

和

之间添加:

span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}

#7

Similar to what ADW said, in fact I'll edit his fiddle to help explain the difference.

类似于ADW所说的，事实上我将编辑他的小提琴来解释不同之处。

In your description you explicitly described h2 followed by p should have the double border in between.

在您的描述中，您显式地描述了h2和p之间应该有双边框。

ADW's solution is good enough, only when there is only one p after the h2, but if there is another p, it will have a strange red line between the paragraphs. That's why we should only select the p which is immediately following a h2.

ADW的解是足够好的，只有当h2后面只有一个p时，但是如果有另一个p，那么在段落之间会有一条奇怪的红线。这就是为什么我们应该只选择p在h2后面。

CSS selector for p immediately following h2 is h2 + p

紧接着h2的CSS选择器是h2 + p

Try this: http://jsfiddle.net/gR4qy/42/

试试这个:http://jsfiddle.net/gR4qy/42/

h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }

This is nothing new. It's CSS 2.1! http://www.w3.org/TR/CSS2/selector.html

这并不是什么新鲜事。CSS 2.1 !http://www.w3.org/TR/CSS2/selector.html

Unfortunately there's nothing I can think of to get rid of the blue border if the p is missing. You're on your own there :S

不幸的是，如果p缺失了，我想不出什么可以去掉蓝色边框。你只能靠自己了:S

Sorry I have to get 50 points before I can comment and I dont know how to get points so I pposted this as a new answer :S

很抱歉，我必须得得50分才能发表评论，我不知道怎么才能得到分数，所以我把这个作为一个新的答案:S

#8

h2 { border-bottom: solid blue;}
p { border-top: solid red; }

Will get you close, then play around with margins and padding until things line up.

将会让你接近，然后在边缘和填充上玩，直到事情排好。

http://jsfiddle.net/gR4qy/

http://jsfiddle.net/gR4qy/

#9

Just take away the margins between the items so that their borders fit right against one another. Here's a complete example -- size of the borders made large so it's easy to see.

只要去掉物品之间的边距，这样它们的边界就会互相吻合。这里有一个完整的例子——边框的大小变大了，所以很容易看到。

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<style type="text/css">
h2 { border-bottom: 10px solid blue; margin-bottom: 0; }
p { border-top: 10px solid green; margin-top: 0; }
</style>

</head>
<body>

<h2>Hiya</h2>
<p>La la la</p>

<h2>Hiya</h2>
<p>La la la</p>

</body>
</html>

#10

Just had to do this, we're implementing a two-tone shadow in our app. Being an mobile app we want to avoid box-shadow (performance) so an even simpler solution using :after, where its absolutely positioned based on its parent is:

我们需要做的是，在我们的应用中实现一个双音阴影。作为一个移动应用，我们希望避免box阴影(性能)，所以一个更简单的解决方案是:after，它的绝对定位是:

 :after{
   content: '';
   display: block;
   height:0;
   border-top: 1px solid rgba(0, 0, 0, .1);
   border-bottom: 2px solid rgba(0, 0, 0, .05);
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
 }

#11

You could do it like this:

你可以这样做:

also see FIDDLE

也看到小提琴

h2 {
    border-bottom: 3px solid red;
}
p {
    border-top: 3px solid blue;
    margin-top: -20px;
    padding-top: 20px;
}