Огляд
Властивість clip визначає область позиціонованого елемента, яка відображатиме його вміст. Все, що не поміщається в цю область, буде обрізано і стане невидимим. Наразі єдиний доступний тип області - прямокутник. Все інше залишається лише у мріях. clip працює лише для абсолютно позиціонованих елементів.
Синтаксис
clip: rect(Y1, X1, Y2, X2) | auto | inherit
Значення
У якості значень використовується відстань від краю елемента до області вирізання, яка задається в одиницях CSS - пікселях (px), em та інші. Якщо потрібно залишити край області без змін, слід встановити auto, положення інших значень показано на рис. 1.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clip</title>
<style>
#layer {
position: absolute; /* Абсолютне позиціонування */
clip: rect(40px, auto, auto, 40px); /* Ховаємо частину тексту */
width: 200px; /* Ширина блоку */
color: white; /* Колір тексту */
background: #7f4c3e; /* Колір фону */
border: 1px solid black; /* Параметри рамки */
padding: 10px; /* Відступи навколо тексту */
}
</style>
</head>
<body>
<div id="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>Результат цього прикладу показано на рис. 2.
Об'єктна модель
[window.]document.getElementById("elementID").style.clip
Браузери
Internet Explorer до версії 7.0 включно працює з іншою формою запису, де значення координат розділяються пробілом, а не комою - clip: rect(40px auto auto 40px). Також Internet Explorer до версії 7.0 включно не підтримує значення inherit.