web-dev-qa-db-fra.com

Comment faire une bordure double lignes en CSS, chaque ligne étant de couleur différente, sans utiliser d'image de fond

Comment faire une bordure double ligne en CSS, chaque ligne dans une couleur différente sans utiliser background-image?

Par exemple, comme ceci:

enter image description here

Code:

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

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

Remarque: Je ne considère pas IE 8, 7, 6

csscss3
26
Jitendra Vyas

Je viens de trouver le chemin sur Google Recherche et ça marche bien pour moi.

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

Edit: J'ai trouvé un autre moyen de réaliser plusieurs bordures à l'aide de pseudo-éléments CSS 2.1.

Assistance: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8 +

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

54
Jitendra Vyas

Vous pouvez le faire avec le pseudo élément: 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;
}

Cela se dégrade gracieusement en une seule ligne si le sélecteur: after n'est pas disponible.

15
Duopixel

c'est possible en CSS3 très facilement. essayez avec le code suivant

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;
}
7
Ariful Islam
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
5
Hosam alzagh

Je ne pense pas qu'il y ait moyen de le faire sans un élément supplémentaire.

Il existe outline, mais elle ne permet pas une règle outline-bottom: un contour ne peut être identique que sur les quatre côtés.

La pseudo-classe :after permettra l'ajout de contenu texte uniquement, pas d'éléments. 

Voici comment le faire avec une hr supplémentaire.

3
Pekka 웃

Avez-vous essayé d'ajouter un <span> entre <h2> et <p> avec le css suivant:

span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
3
wei

Semblable à ce qu'ADW a dit, en fait je vais éditer son violon pour aider à expliquer la différence.

Dans votre description, vous décrivez explicitement que h2 _ ​​suivi dep devrait avoir une double bordure entre les deux.

La solution d'ADW est assez bonne, seulement lorsqu'il n'y a qu'un p après le h2, mais s'il y en a un autre, il y aura une ligne rouge étrange entre les paragraphes. C'est pourquoi nous ne devrions sélectionner que le p qui suit immédiatement un h2.

Le sélecteur CSS pour p suivant immédiatement h2 est h2 + p

Essayez ceci: http://jsfiddle.net/gR4qy/42/

h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }

Ce n'est pas nouveau. C'est CSS 2.1! http://www.w3.org/TR/CSS2/selector.html

Malheureusement, rien ne me permet de supprimer la bordure bleue si le p manque. Vous êtes seul: S

Désolé, je dois obtenir 50 points avant de pouvoir commenter et je ne sais pas comment obtenir des points, alors j'ai posté ceci comme une nouvelle réponse: S

1
vahanpwns
h2 { border-bottom: solid blue;}
p { border-top: solid red; }

Vous rapprochez de vous, puis jouez avec les marges et le rembourrage jusqu'à ce que tout soit aligné.

http://jsfiddle.net/gR4qy/

0
ADW

Supprimez simplement les marges entre les éléments pour que leurs bordures s’adaptent parfaitement les unes aux autres. Voici un exemple complet: la taille des bordures est grande pour que vous puissiez la voir facilement.

<!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
Will Martin

Vous pouvez le faire comme ceci:

voir aussi FIDDLE

h2 {
    border-bottom: 3px solid red;
}
p {
    border-top: 3px solid blue;
    margin-top: -20px;
    padding-top: 20px;
}
0
Danield

De Wystarczyło à zrobić, wdrażamy dwubarwny cień w naszej aplikacji. Będąc aplikacją mobilną, której chcemy uniknąćbox-shadow(wydajność), więc jeszcze prostsze rozwiąanie:after, je suis membre de la communauté politique de Bosnie-Herzégovine:

 :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
Linearza