Пример
Укажите, как далеко должен простираться фон внутри элемента:
div
{
border: 10px dotted black;
padding: 15px;
background:
lightblue;
background-clip:
padding-box;
}
Попробуйте сами »
Определение background-clip
CSS свойство background-clip определяет, как далеко должен простираться фон (цвет или изображение) внутри элемента.
| Значение по умолчанию: | border-box |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.backgroundClip="content-box" Попробуй |
Поддержка background-clip
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Синтаксис background-clip
background-clip: border-box|padding-box|content-box|initial|inherit;
Значения background-clip
| Значение | Описание | Демонстрация |
|---|---|---|
| border-box | Значение по умолчанию. Фон простирается за границу | Демо ❯ |
| padding-box | Фон простирается до внутреннего края рамки | Демо ❯ |
| content-box | Фон простирается до края поля содержимого | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме background-clip
CSS Учебник: CSS Backgrounds
HTML DOM справочник: backgroundClip свойство