Comment faire des lignes doubles frontière en CSS, chaque ligne de couleur différente, sans utiliser l'image de fond?
Comment faire une bordure de ligne double en CSS, chaque ligne dans une couleur différente sans utiliser background-image?
, Par exemple comme ceci:
Code:
<h2> heading 2 </h2>
<p> paragraph text </p>
<h2> heading 2 </h2>
<p> paragraph text </p>
Note: Je ne considère pas IE 8, 7, 6
11 réponses
Je viens de trouver le chemin sur la recherche google et cela fonctionne 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 border en utilisant des pseudo-éléments CSS 2.1
Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8 +
Http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Vous pouvez le faire avec le pseudo-élément: after:
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.
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;
}
Je ne pense pas qu'il y ait un moyen de le faire sans un élément supplémentaire.
Il y a outline, mais cela n'autorise 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 de texte uniquement, pas d'éléments.
Voici comment le faire avec un supplément de hr.
Avez-vous essayez d'ajouter un <span> entre <h2> et <p> avec le code css suivant:
span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
Semblable à ce qu'ADW a dit, en fait, je vais éditer son violon pour aider à expliquer la différence.
Dans votre description, Vous avez explicitement décrit h2 suivi de p devrait avoir la double bordure entre les deux.
La solution D'ADW est assez bonne, seulement quand il n'y a qu'un p après le h2, mais s'il y a un autre p, il aura une étrange ligne rouge entre les paragraphes. C'est pourquoi nous ne devrions sélectionner que le p qui suit immédiatement un h2.
CSS sélecteur de 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 rien de nouveau. C'est CSS 2.1! http://www.w3.org/TR/CSS2/selector.html
Malheureusement, il n'y a rien à quoi je puisse penser pour me débarrasser de la bordure bleue si le p est manquant. Vous êtes seul là-bas: S
Désolé, je dois obtenir 50 points avant de pouvoir commenter et je ne sais pas comment obtenir des points, donc j'ai pposted ceci comme un nouveau réponse: S
h2 { border-bottom: solid blue;}
p { border-top: solid red; }
Vous rapprochera, puis jouez avec les marges et le remplissage jusqu'à ce que les choses s'alignent.
Enlevez simplement les marges entre les éléments afin que leurs bordures s'ajustent les unes contre les autres. Voici un exemple complet - la taille des bordures est grande, donc c'est facile à voir.
<!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>
Juste eu à faire cela, nous mettons en œuvre une ombre à deux tons dans notre application. Être une application mobile, nous voulons éviter box-shadow (performance) donc une solution encore plus simple en utilisant : après , où son absolument positionné en fonction de son parent est:
: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%;
}