Управление длиной границы div без изменения ширины в CSS

Быстрый ответ

Чтобы создать "сокращенную границу", используйте псевдоэлемент ::before с абсолютным позиционированием внутри родительского элемента div, позиционированным относительно. Желаемая длина границы определяется шириной псевдоэлемента width, а толщина границы – его высотой height.

.div-with-small-border::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: black;
  z-index: 1;
}

Этот CSS, примененный к корректно оформленному div, создает эффект сокращенной нижней границы. Варьируйте значение width, чтобы установить длину, и height, чтобы настроить толщину.

Тонкая настройка помощника для работы с границами

• Для центрирования границы установите свойство left равным 50% и примените transform: translateX(-50%).
• Регулируйте z-index для правильного отображения границы на странице.
• Используйте max-width, чтобы граница сохраняла свои пропорции на экранах разной ширины.
• Свойство box-shadow можно использовать для создания эффекта границы с помощью теней, придавая элементу стильный "радиальный" вид.

Визуализация

⌨️ Визуальные примеры — самое наглядное объяснение CSS.

Демонстрируем создание границы, которая меньше ширины div, с использованием псевдоэлементов:

[============= div =============]
              [::before==========]

Структура CSS: использование ::before внутри div:

.parent-div::before {
  content: '';
  display: block;
  margin: auto;
  width: 50%;
  border-bottom: 2px solid black;
}

Теперь div обладает нижней границей, которая короче, но при этом заметнее его собственной ширины.

Тени заявляют: "Мы тоже можем имитировать границы!"

Вы уже пробовали использовать box-shadow для создания индивидуальных границ? Взгляните на пример:

.div-with-shadow-border::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: inset 0px -2px 0px 0px black;
  width: 100%;
  height: 100%;
}

Используя box-shadow, вы можете создавать уникальные стили границ. Отрицательное значение blur обеспечивает четкий край и ярко выраженную тень.

Подробнее об этом расскажет наш спикер на видео

Дополнительные способы создания необычных границ

• С помощью линейного градиента можно создать яркий стиль границы.
• Дополнительный div, специально созданный для обрамления, тоже может быть отличным решением.

Полезные материалы

1. border | CSS-Tricks — Обширное руководство по оформлению границ в соответствии со стандартами CSS.
2. border – CSS | MDN — Подробное изложение свойства границ CSS от экспертов Mozilla.
3. CSS Borders — Руководство по созданию границ в CSS.
4. Учебник | DigitalOcean — Мастер-класс по техникам трансформации и масштабирования длины границы в CSS.
5. Формы в CSS | CSS-Tricks — Создание фигур с помощью CSS для расширения визуальных возможностей границ.