Élément de div extérieur CSS avec boîte intérieure / trait de frontière
Question
J'essaie de tenter ce qui suit.J'ai une div contenant une boîte avec un grand coup de bord.Voici le code que j'ai joué avec.
.insta{
background:#000;
width:820px;
height:300px;
margin-left: auto;
margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}
<div class="insta"><div class="inner-line"></div></div>
Et je reçois ce résultat,
J'essaie d'arriver à cela comme résultat final,
Je connais les méthodes de la boîte CSS fournit, mais je ne sais pas si je peux y parvenir en utilisant cela.Des idées ou des pensées?
La solution
Vous pouvez utiliser une combinaison d'ombre de la boîte qui n'utilise pas de propagation ou de flou et de bordure:
CSS
border: 10px solid white;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
Autres conseils
Peut-être le type de frontière "Ridge" suffit ...
.inner-line{
border:3px ridge white;
...
I know this question is very old, but you can use outline offset: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset
Just change the offset to a negative in order to get it inside the container:
outline-offset: -15px;