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


Властивість clip визначає розміри прямокутної області позиціонованого елемента, в якій буде показано його вміст.

Властивість `clip`

Все, що не поміщається в цю область, буде обрізано та стане невидимим. Властивість clip працює тільки з абсолютно позиційованими елементами (зі значеннями position і fixed) та не працює якщо для елемента задана властивість overflow: visible.

Як значення використовується відстань від краю елемента до області вирізки, яке задається в одиницях CSS - пікселі (px), em та ін. Якщо край області потрібно залишити без змін, слід встановити auto.

Нотатка:

Властивість clip вважається застарілою. Замість неї, рекомендується використовувати clip-path. Деякі браузери до сих пір підтримують її, але Ви маєте бути обережними: ця властивість може бути видалена остаточно будь коли!

Синтаксис

clip: auto|shape|initial|inherit;

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

auto

Все залишиться без змін

shape

Єдине допустиме значення: rect (top, right, bottom, left)

initial

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

inherit

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

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.clip="rect(0px,50px,50px,0px)"

Переглядачі

Переглядач
clip

1.0

4.0

1.0

1.0

7.0

Переглядач
clip

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Визначає область позиціонованого зображення

img {


    position: absolute;


    clip: rect(0px,60px,200px,0px);


}

Динамічний приклад зміни значень clip

Простий приклад

Демонстрація роботи властивості

Динамічний приклад

Додаткові посилання