NAHB
@NAHB

Что не так с border'ом и как это исправить?

Хотел получить что-то вроде внутренней тёмной рамки.

JSFiddle

<section class="about-us">
  <div class="about-us-img">
    <div class="about-us-img-gradient"></div>
  </div>
</section>

* {
	margin: 0;
	padding: 0;
	font-size: 0;
	box-sizing: border-box;
}
.about-us {
	padding: 50px 0;
	display: flex;
	justify-content: center;
}
.about-us-img {
	background-image: url(https://svgshare.com/i/McT.svgg);
}
.about-us-img-gradient {
	width: 555px;
	height: 700px;
	background-image: linear-gradient(to top, rgba(252, 95, 69, 0.29) 0%, rgba(0, 0, 0, 0) 100%);
	border: 10px solid rgba(0, 0, 0, 0.2);
}


upd. Я сейчас вроде как нашёл решение, но не уверен, правильно ли сделал и стоило ли создавать ещё один div. Вот.
  • Вопрос задан
  • 142 просмотра
Решения вопроса 1
@arteqrt
Начинающий програмист
Используй заместо border
box-shadow: inset 0 0 1px #black;
Таким образом у тебя будет внутренняя рамка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kyzinatra
.about-us-img-gradient{
box-shadow: inset 0 0 0 (размер рамки)px black; - для четкой рамки
box-shadow: inset 0 0 (размер рамки)px black; - для размытой, красивой рамки
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы