clip

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS2+
Значение по умолчанию	auto
Наследуется	Нет
Применяется	К блочным элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

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

Аргументы

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

Рис.1. Значение свойства clip

Пример

<!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="layer1">

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

clip

Категории

Последние комментарии

	Русский
	English