Все статьи | Блог студента

Баттл: Border vs box-shadow

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Баттл: Border vs box-shadow главное изображение

Border, или box-shadow? Какое же свойство лучше использовать для создания рамок?

Ответ довольно прост — всё зависит от того, где вы вам нужно реализовать рамку.

Как по мне, свойство box-shadow подойдёт, только если вам нужно при наведении на кнопку делать её прозрачной, сохраняя только рамку. Почему не border? Из-за того что это свойство влияет на размеры блока, в отличие от box-shadow.

box-shadow: inset 0 0 0 2px black;

Против

box-sizing: border-box;
border: 2px solid black;

Да и нет гарантии, что box-sizing вам что-нибудь не испортит 😅

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

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 20 октября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
8 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
8 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
8 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
8 декабря 5 месяцев