css - 如何在CSS中制作双线边框，每行不同颜色，而不使用背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5753351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make double lines border in CSS, each line in different color, without using background image?
提问by Jitendra Vyas
How to make a double line border in CSS, each line in a different color without using background-image?
css - 如何在CSS中制作双线边框，每条线的颜色不同而不使用background-image？
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
回答by Jitendra Vyas
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/
回答by methodofaction
You can do it with the :after pseudo element:
您可以使用 :after 伪元素来实现：
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 选择器不可用，这会优雅地降级为一行。
回答by Ariful Islam
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;
}
回答by Hosam alzagh
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
回答by wei
Have you try add a <span>between <h2>and <p>with the following css:
您是否尝试使用以下 css添加<span>介于<h2>和之间<p>：
span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
回答by Pekka
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-bottomrule: An outline can only be identical on all four sides.
有outline，但它不允许一个outline-bottom规则：一个轮廓只能在所有四个边上都相同。
The :afterpseudo-class will allow the adding of text content only, no elements.
该:after伪类允许的文本内容仅添加，没有元素。
Here'show to do it with an additional hr.
以下是如何使用额外的hr.
回答by vahanpwns
Similar to what ADW said, in fact I'll edit his fiddle to help explain the difference.
与 ADW 所说的类似，实际上我将编辑他的小提琴以帮助解释差异。
In your description you explicitly described h2followed bypshould 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，就会在段落之间出现一条奇怪的红线。这就是为什么我们应该只选择紧跟在 h2 之后的 p。
CSS selector for p immediately following h2is h2 + p
紧跟在 h2 之后的 p 的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
回答by Danield
回答by Linearza
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-shadow（性能），因此使用 更简单的解决方案: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%;
}
回答by ADW
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.
会让你接近，然后玩边缘和填充直到事情排队。
