У меня проблема, когда мне нужно сделать нижнюю границу с заданным смещением в CSS
например, в этом JSFiddle у меня есть черная нижняя граница.
https://jsfiddle.net/uexma4o6/343/
<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>
но я хочу сместить эту сплошную черную границу в 2 пикселя, чтобы она была на 5 пикселей выше того места, где она находится.
Является ли это возможным?
Это можно сделать с помощью линейного градиента:
.box {
background:
linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
lightcoral;
width: 500px;
height: 40px;
}<div class="box"></div>Вы также можете сделать это следующим образом:
.box {
background:
linear-gradient(black,black) bottom/100% 2px no-repeat,
lightcoral;
border-bottom:5px solid lightcoral;
width: 500px;
height: 40px;
box-sizing:border-box;
}<div class="box"></div>Еще одна идея с тенью коробки:
.box {
background:lightcoral;
border-bottom:2px solid black;
box-shadow:0 5px 0 lightcoral;
width: 500px;
height: 40px;
}<div class="box"></div>И с вложенной тенью:
.box {
background:lightcoral;
box-shadow:
0 -5px 0 lightcoral inset,
0 -7px 0 black inset;
width: 500px;
height: 40px;
}<div class="box"></div>https://jsfiddle.net/StephanieSchellin/j7pmxkc3/
Используйте CSS ::after, чтобы добавить псевдоэлемент с искомой границей. Затем переместите псевдоэлемент, чтобы расположить его так, как вам нравится. Этот псевдоэлемент всегда будет привязан к своему корневому элементу, но вам все равно придется учитывать его изменение для @media изменений запроса и тому подобного.
На изображении ниже вы видите, что это решение накладывает псевдоэлемент над корневым. Вы можете использовать ::before или поэкспериментировать с другими настройками позиционирования в соответствии с вашими потребностями макета.
Всегда выполняйте много кросс-браузерного тестирования, когда делаете такие вещи в крайних случаях, потому что, возможно, вы столкнетесь с проблемами блочной модели.
<div class='the-div'></div>
.the-div {
width:500px;
height:40px;
background-color:lightcoral;
position: relative
}
.the-div::after {
border-bottom: 2px solid black;
content: '';
width:500px;
position:absolute;
bottom:5px;
}
См. https://css-tricks.com/pseudo-element-roundup/. Есть много интересных вещей, которые вы можете сделать с псевдоэлементами.
