Deux bordures de couleur


95

Le client veut deux bordures de couleur pour un aspect en relief. Puis-je faire cela sur un élément? J'espérais éviter d'empiler deux éléments DOM avec des bordures individuelles.


Êtes-vous prêt à utiliser Javascript pour obtenir cet effet? jquery.malsup.com/corner
nopuck4you

Réponses:


140

Oui: utilisez la outlinepropriété; il agit comme une deuxième frontière à l'extérieur de votre frontière. Attention, bien qu'il puisse interagir de manière bancale avec des marges, des rembourrages et des ombres portées. Dans certains navigateurs, vous devrez peut-être également utiliser un préfixe spécifique au navigateur; afin de s'assurer qu'il le capte: -webkit-outlineet autres (bien que WebKit en particulier ne l'exige pas).

Cela peut également être utile dans le cas où vous souhaitez abandonner le contour pour certains navigateurs (comme c'est le cas si vous souhaitez combiner le contour avec une ombre portée; dans WebKit, le contour est à l'intérieur de l'ombre; dans FireFox, c'est à l'extérieur, il -moz-outline: 0est donc utile de s'assurer que vous n'obtenez pas une ligne noueuse autour de votre belle ombre portée CSS).

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

Edit: Certaines personnes ont remarqué que outlinecela ne va pas bien avec IE <8. Bien que cela soit vrai; soutenir IE <8 n'est vraiment pas quelque chose que vous devriez faire.


27
-1 pour "supporter IE <8 n'est vraiment pas quelque chose que vous devriez faire". Ne pas prendre en charge IE6 peut être bien. Mais ne pas supporter IE7 est ridicule, aucun site avec un public non technique ne peut se le permettre
Pekka

6
outlineexiste depuis CSS2.
BoltClock

156
+1 pour ne pas prendre en charge IE 7, alors que votre site devrait toujours fonctionner et avoir une apparence raisonnablement bonne dans IE 7, une prise en charge complète n'est pas nécessaire. surtout s'il ne s'agit que d'une bordure bicolore. J'utilise personnellement box-shadow et d'autres fonctionnalités «avancées». IE7 ne peut pas voir une boîte-ombre, ... gros problème. il n'y a aucune raison d'utiliser une solution moins adaptée, trop compliquée ou même obsolète, juste pour contourner les bizarreries d'IE7.
Marian Theisen

2
Aussi, consultez cette référence pour de bonnes raisons d'accessibilité pour NE PAS pirater la propriété de contour à des fins de conception: outlinenone.com
Joel Glovier

11
Un mot d'avertissement, outlineest moins polyvalent que border. En particulier, le W3C dit : "Remarque. Le contour est le même de tous les côtés. Contrairement aux bordures, il n'y a pas de propriété 'contour-top' ou 'contour-gauche' ." (Je souligne.)
Bob Stein

68

C'est très possible. Cela prend juste une petite supercherie CSS!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>

Est-ce ce que vous recherchez?


En effet, c'est délicat, mais il se dégrade gracieusement et fonctionne même sur le navigateur d'origine de mon HTC (Android)! Si vous utilisez border-radius, essayez de réduire le rayon de la bordure intérieure d'un pixel, cela rendra l'écart entre les deux bordures arrondies presque imperceptible.
grippe

C'est sympa. Utiliser bottom:1pxplutôt que height:100%fonctionner mieux pour moi pour juste une bordure inférieure :)
Nick

si vous avez un rembourrage pour le div.border, j'ai trouvé que l'ajout d'une marge négative avec les mêmes dimensions pour le div.border:before, aidait à tout garder en ligne. Peut-être qu'il y a une meilleure façon de le faire? jsFiddle
NW Tech

+1 pour l'utilisation de pseudo-éléments. Je pense que cette réponse est meilleure que celle de Williham Totland
Matías Cánepa

C'est bien! :)
BennKingy

33

Une autre façon est d'utiliser box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

Voir l' exemple ici.


Je préfère cela car cela fonctionne avec border-radius contrairement à la méthode de contour
Johan

18

Avez-vous essayé les différents styles de bordure disponibles dans la spécification CSS? Il existe déjà deux styles de bordure qui pourraient répondre à vos besoins:

border-style: ridge;

Ou

border-style: groove;

1
C'était exactement ce dont j'avais besoin. (Correction de <fieldset> dans IE8)
DOOManiac

14

Le contour est bon, mais seulement lorsque vous voulez la bordure tout autour.

Disons que si vous voulez le faire uniquement en bas ou en haut, vous pouvez utiliser

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

Et pour le bas:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

J'espère que cela aide.


6

Au lieu d'utiliser un contour non pris en charge et problématique, utilisez simplement

  • background-color + padding pour la bordure intérieure
  • bordure normale pour la bordure extérieure.

Exemple:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

TEST (JSFiddle) :


Fonctionne bien, mais seulement si vous avez du contenu avec l'arrière-plan.
Culme

4

Si par "gaufrage" vous entendez deux bordures l'une autour de l'autre avec deux couleurs différentes, il y a la outlinepropriété ( outline-left, outline-right....) mais elle est mal supportée dans la famille IE (à savoir, IE6 et 7 ne la supportent pas du tout ). Si vous avez besoin de deux bordures, un deuxième élément wrapper serait en effet le meilleur.

Si vous voulez dire utiliser deux couleurs dans la même bordure. Utilisez par exemple

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

il y a des spéciaux border-stylespour cela aussi ( ridge, outsetet inset) mais ils ont tendance à varier selon les navigateurs selon mon expérience.


3
Je crois que ce qu'il demande, c'est quelque chose comme border : black white; cela signifie définir deux couleurs différentes pour une bordure qui ressemble séquentiellement en même temps.
Tarik

1
@Braveyard ah, je vois. Ce serait théoriquement possible en utilisant outlinemais cela ne fonctionnera pas bien dans IE <8
Pekka

3
Notez qu'il n'y a que contour ... il n'y a malheureusement pas de contour-gauche, contour-droite, contour-haut ou contour-bas.
David Sherret

-1

Pas possible, mais vous devriez vérifier pour voir si des border-stylevaleurs comme inset, outsetou une autre, ont produit l'effet que vous voulez .. ( j'en doute cependant .. )

CSS3 a les propriétés d' image de bordure , mais je ne connais pas encore la prise en charge des navigateurs (plus d'informations sur http://www.css3.info/preview/border-image/ ).


Rien n'est impossible dans le monde de la programmation: P et bien j'aime faire cette déclaration tout le temps :)
Tarik

-1

Écrivez simplement

style="border:medium double;"

pour la balise html


1
Cela donne deux bordures avec une seule couleur entre elles.
Williham Totland

-1

Vous pourriez utiliser

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

-2

Cela produit un bel effet.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.