Форум для общения!

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Песочница

div {
  background-color: #e4efc7;
  padding: 20px;
  border: 5px dashed #c26558;
  background-clip: padding-box;
}

Краткая информация

Значение по умолчаниюborder-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Значения

padding-box
Фон отображается внутри границ.
border-box
Фон выводится под границами.
content-box
Фон отображается только внутри контента.
text
Фон отображается только внутри текста.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.

object-fit object-fit object-fit
padding-boxborder-boxcontent-box

Рис. 1. Результат применения разных значений

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !