CSS внешний элемент div с внутренней коробкой / пограничным ходом
Вопрос
Я пытаюсь попытаться сделать следующее.У меня есть DIV, содержащий коробку с большим пограничным ходом.Вот код, с которым я играл.
.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>
.
И я получаю этот результат,
Я пытаюсь добраться до этого как окончательный результат,
Я знаю о боксе методы CSS предоставляет, но не знаю, смогу ли я достичь этого, используя это.Любые идеи или мысли?
Решение
Вы можете использовать комбинацию коробки-тени, которая не использует разброс или размытие и границу:
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);
.
Другие советы
Может быть, тип границы "Ridge" достаточно ...
.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;