CSS фоны и границы

Этот пример границ, фонов и теней состоит из центрированных фоновых изображений, созданных из линейных и радиальных градиентов. Ряд теней делает границу визуально более выразительной. Элемент слева имеет установленное фоновое изображение границы. Элемент справа имеет закруглённую пунктирную границу.

Фоновые изображения определяются с помощью background-image. Изображения центрируются с помощью background-position. Используются различные значения свойства background-clip для нескольких фоновых изображений, чтобы фоновые изображения оставались внутри области содержимого. Цвет фона обрезается до области отступа, предотвращая появление фона через прозрачные участки для border-image и dotted border. Закруглённые углы элемента справа создаются с помощью свойства border-radius. Одно объявление box-shadow используется для задания всех теней, как внутренних, так и внешних.

Нажмите «Играть» в примере выше, чтобы увидеть или изменить код анимации в MDN Playground.

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

• background сокращение

• background-position-x
• background-position-y
• background-position-inline
• background-position-block
• border-bottom-color
• border-bottom-style
• border-bottom-width

• border-bottom сокращение

• border-left-color
• border-left-style
• border-left-width

• border-left сокращение

• border-right-color
• border-right-style
• border-right-width

• border-right сокращение

• border-top-color
• border-top-style
• border-top-width

• border-top сокращение

• border-color сокращение

• border-style сокращение

• border-width сокращение

• border сокращение

• border-collapse
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius

• border-radius сокращение

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

• border-image сокращение

• box-shadow

• <line-style> перечисление

Изучение CSS: фоны и границы

Объясняет, как реализовать декоративные изображения с помощью фоновых изображений CSS.

Использование нескольких фонов

Объясняет, как задать один или несколько фонов для элемента.

Изменение размера фоновых изображений

Описывает, как изменить размер и поведение повторения фоновых изображений.

Изучение CSS: модель области

Объясняет, как границы, наряду с другими свойствами модели области, влияют на модель области CSS.

Использование CSS-градиентов

Объясняет, как создавать фоновые изображения CSS-градиентов.

• border-block-end-color свойство

• border-block-start-color свойство

• border-inline-end-color свойство

• border-inline-start-color свойство

• border-block-end-style свойство

• border-block-start-style свойство

• border-inline-end-style свойство

• border-inline-start-style свойство

• border-block-end-width свойство

• border-block-start-width свойство

• border-inline-end-width свойство

• border-inline-start-width свойство

• border-start-start-radius свойство

• border-start-end-radius свойство

• border-end-start-radius свойство

• border-end-end-radius свойство

• box-sizing свойство

• box-decoration-break свойство

• text-shadow свойство

• <url> тип CSS

• <color> тип данных

• <image> тип данных

• <position> тип данных

• currentcolor ключевое слово

• Интерактивные инструменты, которые позволяют визуально создавать изображения границ, закруглённые углы и тени:
  • Генератор изображений границ
  • Генератор закруглённых углов
  • Генератор теней
• Применение цвета к HTML-элементам с помощью CSS, включая границы.
• Функция фильтра drop-shadow(), которая применяет эффект тени к входному изображению. Функция используется свойствами filter и backdrop-filter.