Elemento DIV externo de CSS con caja interior / accidente cerebrovascular
Pregunta
Estoy tratando de intentar intentar lo siguiente.Tengo un div que contiene una caja con un gran golpe de frontera.Aquí está el código con el que he estado jugando.
.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>
y obtengo este resultado,
Estoy tratando de llegar a esto como el resultado final,
Sé que los métodos de la caja proporcionan CSS, pero no sé si puedo lograr esto usando eso.¿Alguna idea o pensamiento?
Solución
Puede usar una combinación de sombreado de caja que no está utilizando una propagación o desenfoque y borde:
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);
Otros consejos
Tal vez el tipo de frontera "Ridge" es suficiente ...
.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;