Deux bordures de couleur

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.

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.

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?

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.

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;

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.

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

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

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

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.

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/ ).

Écrivez simplement

style="border:medium double;"

pour la balise html

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>

Cela produit un bel effet.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>