Plusieurs bordures autour d'un div avec un calque transparent

Question

J'essaie de créer un bouton avec 3 couches de bordure autour de lui avec le calque central montrant l'arrière-plan du div contenant. Les exemples valent mille mots alors là, vous allez

http://jsfiddle.net/e5Sxt/2/

html

<div id="content"> 
    <p>Generic Content</p> 
    <button class="button">Search</button> 
</div>   

css

#content{ 
    width: 500px; 
    height: 500px; 
    background-color: black; 
    padding: 50px; 
    color: white; 
} 

button{ 
    margin-top: 50px; 
    padding: 20px; 
    text-align: center; 
    background-color: #333; 
    box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb; 
    border: none; 
    cursor: pointer; 
} 

La boîte-ombre rouge est où le noir du contenant div devrait venir par. Si le paramètre box-shadow est défini sur transparent pour ce calque, l'ombre de la case en dessous apparaît à la place.

J'ai essayé d'utiliser les contours, les bordures et les zones ombrées en vain. En ce moment, je pense que je vais devoir envelopper le bouton dans une autre div avec la bordure extérieure et un rembourrage pour montrer l'arrière-plan, mais je voulais voir si quelqu'un pouvait le faire sans ajouter un autre élément html.

Merci!

Answer 1

La réponse dépend sur quels navigateurs vous devez soutenir (et si vous b e heureux avec une solution de repli pour les navigateurs plus anciens).

Il existe une fonctionnalité CSS appelée border-image, qui, franchement, peut faire à peu près tout ce que vous pourriez penser pour une bordure. Vous pourriez réaliser cet effet très facilement en utilisant ce style.

Avec border-image, vous pouvez simplement spécifier une petite image avec vos deux couleurs et la section centrale transparente. Travail terminé.

En savoir plus sur l'image frontière ici: http://css-tricks.com/understanding-border-image/

... Mais il y a un grand côté vers le bas: le soutien du navigateur. border-image est un ajout relativement nouveau à la spécification CSS. Les utilisateurs de Firefox et de Chrome devraient être d'accord, mais les utilisateurs d'Internet Explorer n'ont pas accès à cette fonctionnalité.

détails du support du navigateur complet se trouve ici: http://caniuse.com/#search=border-image

Si le manque de soutien du navigateur pour border-image est suffisant pour tuer cette idée pour vous, alors une autre solution viable serait d'utiliser :before ou :after sélecteurs CSS pour créer un pseudo -élément assis derrière l'élément principal. Cela aurait un fond transparent et serait légèrement plus grand que l'élément principal et avec sa propre bordure. Cela donnera l'apparence de la triple bordure que vous recherchez.

Bien sûr, vous ne pouvez utiliser cette solution que si vous n'utilisez pas déjà :before et :after pour autre chose.

Espérons que cela vous donne quelques idées.

Answer 2

Je pense que la seule façon de le faire est d'utiliser un wrapper malheureusement. Je ne suis pas sûr s'il est possible d'obtenir la transparence à travers l'arrière-plan du bouton. Bien que, si vous connaissez la couleur d'arrière-plan, vous pouvez évidemment l'utiliser dans la bordure, mais bien sûr, cela ne fonctionnera pas pour les dégradés d'arrière-plan. Par contre,

Voici une démonstration jsFiddle proposé de savoir la couleur, et un autre à l'aide d'une enveloppe:

http://jsfiddle.net/eD6xy/

HTML:

<div class="box one-div">(1 div, know color)</div> 

<div class="two-div"> 
    <div class="box">(2 divs, pure transparent)</div> 
</div> 

CSS:

/* 
    With one div, works fine with a constant color (#abc) 
    But with gradient, probably won't match up correctly 
*/ 
.one-div { 
    margin: 15px 10px; 
    border: 5px solid blue; 
    box-shadow: 0 0 0 5px #abc, 
       0 0 0 10px red; 
} 

.two-div { 
    margin-top: 30px; 
    padding: 5px; 
    border: 5px solid red; 
} 

.two-div > .box { 
    border: 5px solid blue; 
}