background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
Описание
Свойство CSS background-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.
Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за border-style или border-image); в противном случае граница скрывает разницу.
Синтаксис
/* Ключевые слова */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Глобальные значения */ background-clip: inherit; background-clip: initial; background-clip: unset; Значения
border-box-
Фон распространяется до внешнего края границы (но под границей в z-порядке).
padding-box-
Фон распространяется до внешнего края отступа. Под границей фон не рисуется.
content-box-
Фон закрашивается внутри (обрезается) поля содержимого.
textЭкспериментальная возможность-
Фон закрашивается внутри (обрезается) текста переднего плана.
Формальный синтаксис
background-clip =
<bg-clip>#
<bg-clip> =
<visual-box> |
[ border-area || text ]
<visual-box> =
content-box |
padding-box |
border-box
Примеры
HTML
<p class="border-box">The background extends behind the border.</p> <p class="padding-box"> The background extends to the inside edge of the border. </p> <p class="content-box"> The background extends only to the edge of the content box. </p> <p class="text">The background is clipped to the foreground text.</p> CSS
p { border: 0.8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; color: rgba(0, 0, 0, 0.2); } Результат
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |
| Начальное значение | border-box |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | повторяющийся список из |
Совместимость с браузерами
Loading…
Смотрите также
- Свойство
clip-pathсоздаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться. - Свойства фона:
background,background-color,background-image - Введение в блочную модель CSS