HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS
Colors RGB HEX HSL
CSS-фоны
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS границы
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS поля
Margins Margin Collapse
CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-текст
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-шрифты
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-иконки CSS-ссылки CSS-списки CSS-таблицы
Table Borders Table Size Table Alignment Table Style Table Responsive
Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS
Float Clear Float Examples
Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS
Navbar Vertical Navbar Horizontal Navbar
Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты
Linear Gradients Radial Gradients Conic Gradients
CSS-тени
Эффекты тени Коробчатая тень
Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Тень окна CSS

❮ Предыдущий Следующий ❯

CSS-свойство box-shadow

Свойство CSS box-shadowиспользуется для применения одной или нескольких теней к элементу.

Укажите горизонтальную и вертикальную тень

В простейшем случае вы указываете только горизонтальную и вертикальную тень. Цвет тени по умолчанию — текущий цвет текста.

Элемент <div> с тенью блока

Пример

Укажите горизонтальную и вертикальную тень:

div {
  box-shadow: 10px 10px;
}

Укажите цвет тени

Параметр colorопределяет цвет тени.

Элемент <div> с серой тенью блока

Пример

Укажите цвет тени:

div {
  box-shadow: 10px 10px grey;
}

Добавьте эффект размытия к тени

Параметр blurопределяет радиус размытия. Чем выше число, тем более размытой будет тень.

Элемент <div> с размытой серой тенью размером 5 пикселей.

Пример

Добавьте эффект размытия к тени:

div {
  box-shadow: 10px 10px 5px grey;
}

Установите радиус распространения тени

Параметр spreadопределяет радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени.

Элемент <div> с размытой серой тенью и радиусом распространения 12 пикселей.

Пример

Установите радиус распространения тени:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Установите параметр вставки

Параметр insetизменяет тень с внешней тени (начало) на внутреннюю тень.

Элемент <div> с размытой серой вставкой box-shadow

Пример

Добавьте параметр вставки:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Добавьте несколько теней

Элемент также может иметь несколько теней:

Пример

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Открытки

Вы также можете использовать это box-shadowсвойство для создания бумажных карточек:

1

1 января 2021 г.

Норвегия

Хардангер, Норвегия

Пример

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Проверьте себя с помощью упражнений

Упражнение:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯