css властивість background-clip

Властивість background-clip визначає, як колір чи картинка тла має виводитися під гранями. Ефект помітний при напівпрозорих (зі значенням transparent) або пунктирних гранях.

Властивість background-clip була введена у CSS3, використовуй її разом з іншими, пов’язаними, властивостями, такими як background-color чи background-image.

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

Без задання застосовується background-clip: border-box, тло простягається до самого краю кордону елемента. Коли властивість приймає значення padding-box, фон зупиняється, коли закінчується внутрішні відступи (поля) елемента. За допомогою content-box, фон застосовується тільки до вмісту елемента.

Існує подібна властивість - background-origin, от тільки вона не ріже тло, тому якщо тло завелике для елемента, то воно просто пройде під його гранями. Дивись 3 приклад.

Ця властивість також можна використовувати в скороченому записі background (наприклад: background: url("background.png") 40% / 10em lightblue round border-box;).

правити

+ додати пораду чи нотатку

Синтаксис

background-clip: border-box|padding-box|content-box|initial|inherit;

Властивість background-clip може отримувати 5 значень:

padding-box

Тло відображається до граней елемента.

автор: Svitlana

правити

border-box

Тло відображається під гранями елемента. Без задання.

автор: Svitlana

правити

content-box

Тло відображається тільки всередині контенту.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
background-clip	4.0	4.0	3.0	10.5	9.0

Підтримка: мобільні переглядачі

Переглядач
background-clip	2.1	4.0	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box bb">border-box</div>
<div class="box pb">padding-box</div>
<div class="box cb">content-box</div>

.box {
    display: inline-block;
    width: 120px;
    padding: 12px;
    margin: 0 8px 8px 0;
    border: 6px dashed rgba(0, 0, 0, .4);
    background-color: gold;
}

.bb { background-clip: border-box; }
.pb { background-clip: padding-box; }
.cb { background-clip: content-box; }