Контур и тень блока
Добавляйте контуры фокуса и эффекты тени вокруг элементов с помощью outline и box-shadow.
«Контур и тень блока» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Свойство outline
outline рисует линию за пределами границы. Она не влияет на раскладку — окружающие элементы не смещаются. Сокращённый синтаксис аналогичен border: ширина, стиль, цвет.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset перемещает outline от края границы. Положительные значения отодвигают его наружу, а отрицательные перемещают внутрь, создавая эффект обрезки.
<button class="focus-demo">Keyboard-focused Button</button>
outline и border
Основные различия:
- outline не влияет на ход раскладки
- outline нельзя задать отдельно для каждой стороны (outline-top не существует)
- outline может иметь непрямоугольную форму (в некоторых браузерах повторяет форму кольца фокуса)
- outline всегда находится за пределами границы
:focus-visible и :focus
Для колец фокуса клавиатуры предпочтительно использовать :focus-visible. outline отображается только когда фокус получен с клавиатуры, а не после щелчка мышью. Это устраняет визуальный шум для пользователей, работающих указателем, и сохраняет доступность.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Основы box-shadow
box-shadow добавляет элементу эффект тени. Сокращённый синтаксис: смещение по X, смещение по Y, радиус размытия, радиус распространения, цвет.
<div class="card">Card with soft shadow</div>
Значения box-shadow
Каждое значение в box-shadow:
- offset-x: горизонтальное смещение (отрицательное значение — влево)
- offset-y: вертикальное смещение (отрицательное значение — вверх)
- blur-radius: степень размытия (0 — резкая тень)
- spread-radius: увеличение или уменьшение размера тени
- color: цвет тени (рекомендуется RGBA)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Внутренняя тень box-shadow
Добавьте ключевое слово inset, чтобы нарисовать тень внутри элемента и создать впечатление нажатой или утопленной поверхности.
<input class="input focus-demo" type="text" value="Focused input" />
Несколько теней box-shadow
Разделяйте несколько теней запятыми. Они накладываются от передней к задней:
<span class="badge">3</span>
box-shadow и filter: drop-shadow
box-shadow учитывает только форму блока. filter: drop-shadow() повторяет форму отрисованного объекта, включая прозрачные области, поэтому идеально подходит для значков PNG с прозрачным фоном.
<div class="icon">★</div>
Система уровней возвышения с box-shadow
Material Design и аналогичные системы определяют несколько уровней теней для визуального отображения возвышения. Свяжите переменные CSS со значениями теней:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Эффективная анимация box-shadow
Анимация box-shadow вызывает перерисовку на каждом кадре. Для повышения производительности анимируйте opacity псевдоэлемента с тенью или используйте filter: drop-shadow(), который может обрабатываться на этапе композиции.
Быстрая проверка
Какое ключевое слово box-shadow рисует тень внутри элемента?
Итоги
outline рисует линию за пределами границы, не влияя на раскладку, поэтому используйте его для индикаторов фокуса. box-shadow добавляет объёмные тени со смещением, размытием, распространением и цветом. Для внутренних теней используйте inset. Несколько теней можно накладывать, разделяя их запятыми.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Контур и тень блока» бесплатный?
Да — полный текст урока «Контур и тень блока» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Контур и тень блока»?
Добавляйте контуры фокуса и эффекты тени вокруг элементов с помощью outline и box-shadow. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Контур и тень блока»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Понимание ширины, высоты, внешних и внутренних отступов
- Стили, ширина и цвет границ
- Размер блока: Content-Box и Border-Box
- Контур и тень блока