CSS: deux bordures de couleur

Question

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.

Answer 1

Yep: Utilisation de l' outline de la propriété; il agit comme une seconde frontière à l'extérieur de votre frontière. Attention, tho', il peut interagir dans un vilain de la mode avec des marges, des remplissages et déposez-les ombres. Dans certains navigateurs, vous pourriez avoir à utiliser un navigateur spécifique préfixe; afin de s'assurer qu'il ramasse sur elle: -webkit-outline (bien que WebKit, en particulier, n'est pas une obligation).

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

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

Edit: Certaines personnes ont fait remarquer qu' outline n'est pas jive bien avec IE < 8. Tout cela est vrai; soutenir IE < 8 n'est vraiment pas quelque chose que vous devriez faire.

Answer 2

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?

Answer 3

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.

Answer 4

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

 border-style: ridge;
 

Ou

 border-style: groove;
 

Answer 5

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

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