Добавление границы в div без увеличения размеров в CSS
Быстрый ответ
Если вы хотите ограничить границу в пределах <div>
, используйте box-sizing: border-box;
. Это CSS-свойство учтет ваши отступы (padding) и границы (border) в заданной ширине (width) и высоте (height) элемента и не будет его расширять.
.div-border-inside {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid red; /* Вот вам насладитесь красочностью */
padding: 10px;
}
Присвоив этот класс вашему <div>
, вы получите стиль с внутренней границей:
<div class="div-border-inside"></div>
Размер блока составляет 100px
, границы уже учтены в этих параметрах.
Совместимость с браузерами
Для обеспечения поддержки старых версий браузеров, добавьте:
.div-border-inside {
-webkit-box-sizing: border-box; /* Специально для Safari */
-moz-box-sizing: border-box; /* Для пользователей Firefox */
box-sizing: border-box;
/* Остальные стили */
}
Свойства с префиксами обеспечивают совместимость даже с IE8+.
Внутренние границы с эффектом свечения через box-shadow
Для создания внутренних границ и эффекта мягкого свечения используйте box-shadow
:
.div-shadow-border-inside {
box-sizing: border-box;
width: 100px;
height: 100px;
box-shadow: inset 0px 0px 0px 10px red; /* Моя страсть к красному цвету продолжается */
padding: 10px;
}
Рекомендуется проверить поддержку браузерами на сайте Can I use.
Эффектные контуры границ, не изменяющие размеры
Outline
— превосходный способ создать границу без изменения размера или расположения элемента:
.div-outline-border-inside {
outline: 2px solid red; /* Чувствуете этот красный оттенок? */
outline-offset: -2px; /* Сместите внутрь, но без перемещения элемента */
}
Outline-offset
со знаком минус позволит переместить контур границы внутрь тега <div>
.
Варианты использования для конкретных случаев
Ситуация: Множественные внутренние границы
Создайте множественные границы, отделенные запятыми, для впечатляющего эффекта:
.div-multiple-borders {
box-shadow: inset 0 0 0 5px red, inset 0 0 0 10px blue; /* Красный и синий – вот это сочетание! */
}
Ситуация: Эффекты при наведении
Оживите элемент при наведении курсора:
.div-hover-effect:hover {
box-shadow: inset 0 0 0 5px green; /* Наведите и вуаля – зеленый! */
}
Ситуация: Регулировка цвета и распространения
Настраивайте ширину распространения границы, играйте с цветом с помощью RGBA:
.div-colored-border {
box-shadow: inset 0 0 0px 10px rgba(255, 0, 0, 0.5); /* Опять красный, но уже более мягкий */
}
Визуализация
🖼️: [ Ваш Пример ]
🖼️: [ ........................ ] <!-- Пустое место -->
👉 Применяем box-shadow
для создания внутренней границы.
.artwork {
box-shadow: inset 0 0 0 2px blue;
}
👉 Использование outline
для границы, которая внедрена внутрь.
.artwork {
outline: 2px solid blue;
outline-offset: -2px;
}
Продвинутые примеры
3D эффект
Удивите окружающих 3D эффектом с применением внутренней тени box-shadow:
.div-depth-effect {
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.4); /* Ваш собственный 3D */
}
Декоративные двойные границы
Изяществом можно удивить не меньше, чем сложностью. Создайте двойные границы с box-shadow
:
.div-decorative-borders {
box-shadow: inset 0px 0px 0px 3px #EFEFEF, inset 0px 0px 0px 6px #BDBDBD; /* Очаровательно, не правда ли? */
}
Анимированные переходы границ
Не хотите, чтобы границы были неподвижными? Добавьте анимацию:
.div-animated-border {
transition: box-shadow 0.3s ease;
}
.div-animated-border:hover {
box-shadow: inset 0 0 0 3px orange; /* Оранжевый взрыв при наведении! */
}
Полезные материалы
- Введение в базовую модель блока CSS – CSS: Каскадные таблицы стилей | MDN — Полное руководство по модели блока CSS.
- CSS Границы – W3Schools — Совершенствуйте свои навыки работы с границами CSS.
- Box Sizing | CSS-Tricks — Почему
box-sizing: border-box;
считается фундаментальным в мире CSS-модели блоков. - CSS Псевдоэлементы – W3Schools — Полезная статья о псевдоэлементах
::before
и::after
. - Box-shadow, одна из лучших возможностей CSS3 – CSS3 . Info — Отличное руководство по использованию теней из «Библии CSS3».
- Отзывчивый веб-дизайн: что это такое и как его использовать — Smashing Magazine — Держите свой статус веб-дизайнерских элит на высочайшем уровне.