1

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

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 от каждой стороны.

3
  • Так вроде все работает... Commented 9 мая 2017 в 18:59
  • @AndreyFedorov Она не по центру родителя.
    – Eugen Eray
    Commented 9 мая 2017 в 19:01
  • Ладно, сейчас сделаем... Commented 9 мая 2017 в 19:04

2 ответа 2

3

Вариант с использованием 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>

2
  • С телефона глянуть не могу. Сори.
    – Eugen Eray
    Commented 9 мая 2017 в 19:47
  • Классный вариант. Мне понравился! 👍
    – Eugen Eray
    Commented 10 мая 2017 в 19:14
3

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;
}
<div class="preview-box"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.