CSS externo elemento div com caixa interna/fronteira acidente vascular cerebral
Pergunta
Eu estou tentando para tentar o seguinte.Eu tenho uma div contendo uma caixa com uma grande fronteira de um avc.Aqui está o código que tenho vindo a jogar com.
.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>
E eu obter este resultado,
Eu estou tentando chegar a isso como o resultado final,
Eu sei da caixa de métodos de CSS, mas não sei se pode conseguir isso usando que.Todas as idéias ou pensamentos?
Solução
Você pode usar uma combinação de caixa de sombra que ainda não estão usando um spread ou borrão e fronteira:
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);
Outras dicas
Talvez o tipo de borda "ridge" é o suficiente...
.inner-line{
border:3px ridge white;
...
Eu sei que essa pergunta é muito antigo, mas você pode usar o contorno de deslocamento:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset
Basta alterar o offset negativo, a fim de fazê-lo dentro do recipiente:
outline-offset: -15px;