发表新帖
发表新帖

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

前端 未结
关注
11 870
广开言路
广开言路 2020-12-24 12:38

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

For example like this:

相关标签:
11条回答
  • 日久生厌
    2020-12-24 12:55

    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>
    0 讨论(0)
  • 无人共我
    2020-12-24 12:56

    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;
}
    0 讨论(0)
  • 别那么骄傲
    2020-12-24 12:58

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

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

    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.

    CSS selector for p immediately following h2 is h2 + p

    Try this: 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

    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

    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

    0 讨论(0)
  • 无人及你
    2020-12-24 12:59 
    border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
    0 讨论(0)
  • 暗喜
    2020-12-24 13:01

    You can do it with the :after pseudo element:

    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.

    0 讨论(0)
  • 陌清茗
    2020-12-24 13:08 
    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/

    0 讨论(0)
 看不清?
提交回复
热议问题