web-dev-qa-db-fra.com

Deux couleurs bordures

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.

cssborder
90
DrANoel

Oui: utilisez la propriété outline; il agit comme une seconde frontière en dehors de votre frontière. Attention, bien qu'elle puisse interagir de manière insignifiante avec les marges, les rembourrages et les 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 enregistre: -webkit-outline et similaires (bien que WebKit en particulier n’exige pas cela).

Cela peut également être utile dans le cas où vous souhaitez supprimer le contour de certains navigateurs (par exemple, si vous souhaitez associer le contour à une ombre portée; dans WebKit, le contour se trouve à l'intérieur de l'ombre; dans FireFox, dehors, donc -moz-outline: 0 est utile pour vous assurer que vous n’obtenez pas une ligne épineuse autour de votre belle ombre portée CSS).

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

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

135
Williham Totland

C'est très possible. Cela prend juste un peu de ruse CSS!

jsFiddle

<div class="border">
    Hi I have two border colors<br />
    I am also Fluid
</div>

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;
}

Est-ce ce que vous cherchez?

62
rkingon

Une autre façon consiste à 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 exemple ici.

33
livibetter

Avez-vous essayé les différents styles de bordure disponibles dans les spécifications CSS? Deux styles de bordure peuvent déjà répondre à vos besoins:

border-style: ridge;

Ou

border-style: groove;
18
Joel Glovier

Le contour est bon, mais seulement quand 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.

14
Cotovanu Andrei

Au lieu d'utiliser un plan non pris en charge et problématique, il suffit d'utiliser

  • couleur de fond + rembourrage pour la bordure intérieure
  • bordure normale pour l'extérieur.

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):http://jsfiddle.net/68gb7/

6
Karol Horosin

Si par "gaufrage" vous entendez deux bordures entourées de deux couleurs différentes, il y a la propriété outline (outline-left, outline-right....) mais il est mal supporté dans la famille IE (IE6 et 7 ne le 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-styles pour cela aussi (ridge, outset et inset) mais ils ont tendance à varier d’un navigateur à l’autre.

4
Pekka 웃