Сделать рамку в div используя ::after

365

11 мая 2017, 10:30

Мне нужно, чтобы была дополнительная рамка, в которую можно было бы потом запихнуть еще контент. У меня её не вышло выровнять. Вот код.

div.preview-box {position: absolute; width: 70px; height: 60px; background-image: linear-gradient(to top, #252323, rgba(0,0,0, 0.86));  
border: 1px solid black; border-bottom: 0px;} 
div.preview-box::after {content: ""; border: 2px solid #343333; position: fixed; width: 68px; height: 58px;}

<div class="preview-box"></div>

То есть надо, чтобы рамка была центрирована и с отступами по 1px от каждой стороны.

Answer 1

Вариант с использованием box-shadow

div.preview-box { 
  position: relative; 
  width: 70px; 
  height: 60px; 
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86)); 
  border: 1px solid black; 
  box-sizing: border-box; 
  box-shadow: inset 0 0 0 2px tomato; /* для примера */ 
}

<div class="preview-box"></div>

Answer 2

div.preview-box { 
  position: relative; 
  width: 70px; 
  height: 60px; 
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86)); 
  border: 1px solid black; 
} 
 
div.preview-box::after { 
  content: ""; 
  border: 2px solid red; // #343333; 
  position: absolute; 
  width: 70px; 
  height: 60px; 
  box-sizing: border-box; 
}