Создание однотонных внутренних границ в CSS: inset border

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

Чтобы создать внутреннюю границу в CSS, используйте свойство box-shadow:

.inset-border {
  box-shadow: inset 0 0 0 2px #000; /* Внутренняя граница */
}

Применяйте этот класс к элементу, чтобы обеспечить четкую внутреннюю границу:

<div class="inset-border">Содержимое</div>

Множественные значения box-shadow позволят создать сложные эффекты. Для настройки прозрачности используйте параметры RGBA.

.multi-layer-border {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 0 4px #fff; /* Граница типа "слоёный пирог" */
}

Псевдоэлементы и внутренние границы

Оформление границ при помощи псевдоэлементов

Псевдоэлементы ::before или ::after могут быть использованы для создания сложного оформления границ HTML-элементов:

.inset-border::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  box-shadow: inset 0 0 0 2px #000;
  pointer-events: none; /* Клики не учитываются */
}

Не забывайте задавать родительскому элементу относительное позиционирование.

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

Управление контурами и производительностью

Применение комбинации outline и outline-offset позволит создавать тонкие границы или регулировать их ширину. Также стоит учесть производительность — чрезмерное использование теней может снизить работоспособность интерфейса.

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

Воспринимайте внутреннюю границу как рамку вокруг вашего содержимого в мире CSS:

🖼️ Искусство (🎨): [Ваше содержимое]
Рамка (🖼️📐): [Внутренняя граница]

С помощью box-shadow можно аккуратно обрамить содержимое:

.content {
  box-shadow: inset 0px 0px 0px 2px #000; /* Рамка вокруг содержимого */
}

Таким образом, box-shadow формирует стильную внутреннюю границу:

До: 🎨🖼️   (содержимое без рамки)
После:  🎨🖼️📐 (содержимое с рамкой)

Разумный выбор границ: Настройка и дифференциация

Каждый пиксель важен: Управление шириной границ

Четвёртый параметр 'box-shadow', заданный в пикселях, позволяет управлять шириной границы. Мелкие нюансы могут значительно влиять на общий вид дизайна.

Идеальное взаимодействие с макетом

Свойство box-sizing: border-box обеспечивает аккуратное вписывание границ в границы элемента, сохраняя консистентность дизайна.

Постоянство взаимодействия

Применение pointer-events: none к псевдоэлементам гарантирует, что стиль не повлияет на клики или касания, обеспечивая плавную интерактивность.

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

1. border | CSS-Tricks — всеобъемлющее руководство по границам в CSS.
2. border-style – CSS: Cascading Style Sheets | MDN — справочник MDN по стилям границ.
3. Tutorial | DigitalOcean — подробное руководство по внутренним границам в CSS.
4. Just a moment... — живые примеры внутренних границ в CSS на CodePen.
5. CSS Box Model — учебник по работе с CSS box model, близким к внутренней границе.
6. CSS Backgrounds and Borders Module Level 3 — стандарт W3C по CSS фонам и границам.