Свойство clip

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Очень особенное свойство, которое работает по принципу операции кадрирования в редакторах изображений. Из всего объема контента выбирается нужная зона для отображения, а остальное - обрезается. Применение свойства допускается только для объектов, которым присваивается абсолютное позиционирование.

Как правильно задавать?

clip: rect(координаты активной зоны);

Какие могут быть значения?

Координаты зоны определяются расстоянием от левого края и от верха родительского элемента. Расстояние указывается в любых единицах, которые поддерживается CSS.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство clip</title>
  <style>
  div {
   position: absolute;
   clip: rect(40px, auto, auto, 40px);
  }
  img {
   width:200px;
  }
  </style>
  </head>
  <body>
   <div><img src="city.jpg"></div>
 </body>
</html>

Тип CSS свойства:

Форматирование