如何在CSS中制作双线边框,每条线都有不同颜色,不使用背景图片？

Question

如何在CSS中制作双线边框,每条线都使用不同的颜色background-image？

例如这样:

码:

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

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

注意:我不是在考虑IE 8,7,6

Answer 1

我刚刚在谷歌搜索中找到了方法,它对我有用.

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

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

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

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

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

Answer 2

您可以使用:after伪元素:

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

如果:after选择器不可用,则会优雅地降级为单行.

Answer 3

它很容易在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;
}

Answer 4

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