Как сделать двойные линии границ в CSS, каждая линия разного цвета, не используя фоновое изображение? - PullRequest
Новая
       0

Как сделать двойные линии границ в CSS, каждая линия разного цвета, не используя фоновое изображение?

27 голосов
/ 22 апреля 2011

Как сделать двойную рамку в CSS, чтобы каждая строка была разного цвета без использования background-image?

Например, вот так:

enter image description here

Код: 

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

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

Примечание: я не рассматриваю IE 8, 7, 6

Ответы [ 11 ]

55 голосов
/ 22 апреля 2011

Я только что нашел способ поиска в 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/

15 голосов
/ 22 апреля 2011

Вы можете сделать это с псевдоэлементом: 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 не доступен.

7 голосов
/ 22 апреля 2011

это возможно в 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;
}
5 голосов
/ 28 июля 2012 
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
3 голосов
/ 25 июля 2011

Вы пытались добавить <span> между <h2> и <p> со следующим css: 

span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
3 голосов
/ 22 апреля 2011

Я не думаю, что есть способ сделать это без дополнительного элемента.

Существует outline, но оно не допускает правила outline-bottom: контур может быть идентичен только на всех четырех сторонах.

Псевдокласс :after позволяет добавлять только текстовое содержимое, без элементов.

Вот как это сделать с дополнительным hr.

1 голос
/ 13 августа 2013

Подобно тому, что сказал ADW, на самом деле я отредактирую его скрипку, чтобы помочь объяснить разницу.

В вашем описании вы явно описали h2 , за которым следует p , между которыми должна быть двойная граница.

Решение ADW достаточно хорошее, только если после 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

К сожалению, я ничего не могу придумать, чтобы избавиться от синей границы, если p отсутствует. Ты там сам по себе: S

Извините, мне нужно набрать 50 баллов, прежде чем я смогу комментировать, и я не знаю, как получить баллы, поэтому я поставил это как новый ответ: S

0 голосов
/ 22 марта 2015

Просто нужно было сделать это, мы реализуем двухцветную тень в нашем приложении.Будучи мобильным приложением, мы хотим избежать box-shadow (производительность), поэтому еще более простое решение, использующее : после , где его абсолютное позиционирование на основе его родителя: 

 :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%;
 }
0 голосов
/ 13 августа 2013

Вы можете сделать это так:

см. Также FIDDLE 

h2 {
    border-bottom: 3px solid red;
}
p {
    border-top: 3px solid blue;
    margin-top: -20px;
    padding-top: 20px;
}
0 голосов
/ 22 апреля 2011

Просто уберите поля между предметами, чтобы их границы подходили друг к другу. Вот полный пример - размер границ увеличен, поэтому его легко увидеть. 

<!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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...