Как сделать двойную границу линии в CSS, каждая строка другого цвета без использования background-image?
Например, например:
код:
<h2> heading 2 </h2>
<p> paragraph text </p>
<h2> heading 2 </h2>
<p> paragraph text </p>
Примечание: я не рассматриваю IE 8, 7, 6
Я просто нашел способ поиска в Google, и он работает хорошо для меня.
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/
Вы можете сделать это с помощью: после псевдоэлемента:
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;
}
Это изящно ухудшается до одной строки, если селектор: после него недоступен.
это возможно в 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;
}
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
Я не думаю, что есть способ сделать это без дополнительного элемента.
Там outline, но это не позволяет использовать правило outline-bottom: контур может быть только идентичным на всех четырех сторонах.
Псевдокласс :after позволит добавлять только текстовое содержимое, без элементов.
Попробуйте добавить <span> между <h2> и <p> со следующим css:
span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
Подобно тому, что сказал ADW, на самом деле я отредактирую его скрипку, чтобы помочь объяснить разницу.
В вашем описании, которое вы явно описали h2, за которым следует p, должна быть двойная граница между ними.
Решение ADW достаточно хорошее, только когда есть только один p после h2, но если есть другой p, у него будет странная красная линия между абзацами. Поэтому мы должны выбрать только p, который сразу после h2.
Селектор CSS для p сразу после h2 - h2 + p
Попробуйте следующее: http://jsfiddle.net/gR4qy/42/
h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }
Это ничего нового. Это CSS 2.1! http://www.w3.org/TR/CSS2/selector.html
К сожалению, я ничего не могу придумать, чтобы избавиться от синей границы, если отсутствует. Вы сами по себе: S
Извините, мне нужно получить 50 очков, прежде чем я могу прокомментировать, и я не знаю, как получить очки, поэтому я сказал это как новый ответ: S
h2 { border-bottom: solid blue;}
p { border-top: solid red; }
Подойдет вам ближе, а затем поиграйте с полями и отступом до тех пор, пока не выстроится.
Просто уберите поля между предметами так, чтобы их границы соответствовали друг другу. Здесь полный пример - размер границ, сделанных большими, чтобы было легко видеть.
<!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>
Вы можете сделать это следующим образом:
также см. FIDDLE
h2 {
border-bottom: 3px solid red;
}
p {
border-top: 3px solid blue;
margin-top: -20px;
padding-top: 20px;
}
Просто нужно было сделать это, мы реализуем двухтональную тень в нашем приложении. Являясь мобильным приложением, мы хотим избежать 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%;
}