Clip

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS2, CSS2.1
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет

Описание

Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов.

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto | inherit

Значения

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html;    charset=windows-1251">   <title>clip</title>   <style type="text/css">   #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>

Объектная модель

[window.]document.getElementById("elementID").style.clip

Браузеры

Internet Explorer до седьмой версии включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px). Также Internet Explorer до седьмой версии включительно не поддерживает значение inherit.