Possible de passer la frontière à l'intérieur de rembourrage à l'aide de seulement un div?

Je me demandais simplement si quelqu'un connaît un moyen d'utiliser uniquement un div pour obtenir une incrusté effet frontière? Ou dois-je utiliser les deux? Voici ce que je veux dire:

Je suis actuellement en utilisant un div avec une bordure, le tout enveloppé dans un div avec un rembourrage. Je dois garder une trace mentalement de ce qui in_wraps aller avec laquelle out_wraps. J'aimerais simplement avoir sur l'élément sur la page, qui va ressembler à ceci:

Possible de passer la frontière à l'intérieur de rembourrage à l'aide de seulement un div?

au lieu d'avoir à utiliser deux divs et correspondent. Voici le CSS que j'utilise:

.out_wrap_blk{
    padding: 5px;
    background: black;
    float:left;
    margin: 10px;
}

.out_wrap_gry{
    padding: 5px;
    background: #323232;
    float:left;
    margin: 10px;
}

.in_wrap_grn{
    border: 1px solid #0CFF0E;
    padding: 20px;
}

.in_wrap_blk{
    border: 1px solid black;
    padding: 20px;
}

Est-il possible de réduire cela à un seul élément ou dois-je rester avec un élément extérieur enveloppé autour d'un à l'intérieur de l'élément?

InformationsquelleAutor Digital Brent | 2015-01-26
  1. 8

    Essayer cette 

    #bor-outline {
  width:100px;
  height:100px;
  background:grey;
  border: 5px solid #292929;
  outline: 5px solid #e3e3e3;
}

    Voir démo

    • Merci! Je n'avais aucune idée que la propriété css a même existé!
    InformationsquelleAutor Rachel Gallen
  2. 4

    Vous pouvez utiliser un pseudo-élément :

    HTML:

    <div id="w"></div>

    CSS:

    #w{ width:300px;height:300px; background: grey;position:relative; }
#w:after{
    content:"";
    position:absolute;
    left:15px;
    top:15px;
    height:266px;
    width:266px;
    border: 2px solid black;
}

    JSFiddle

    • Merci, alors j'ai essayé cette solution et il a fait un travail, l'autre solution, c'est un peu plus simple, merci bien, c'est toujours bon à savoir.
    InformationsquelleAutor potashin
  3. 4

    Tous vous avez besoin est l'awesomeness de CSS contour-décalage propriété:

    Voici un JSFiddle échantillon.

    CSS:

    div {
    background: #808080;
    margin: 20px;
    width: 200px;
    padding: 20px;
    height: 200px;
    outline: 2px solid black;
    outline-offset: -16px;
}
    InformationsquelleAutor ITWitch