Свойство clip CSS

  • предыдущая страница clear
  • Следующая страница clip-path

Определение и использование

Атрибут clip обрезает элемент с абсолютным позиционированием.

Что happens when the size of an image is greater than the element that contains it? Атрибут "clip" позволяет определить видимые размеры элемента, и этот элемент будет обрезан и отображен в этой форме.

Описание

Эта атрибут используется для определения прямоугольника реза. Для绝对 позиционированного элемента, содержимое внутри этого прямоугольника будет видимым. Содержимое за пределами этой области реза будет обрабатываться в зависимости от значения overflow. Область реза может быть больше или меньше области содержимого.

См. также:

Уроки CSS:CSS позиционирование

Руководство по HTML DOM:Атрибут clip

Пример

Обрезка изображения:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Попробуйте сами

CSS синтаксис

clip: auto|shape|initial|inherit;

Значение атрибута

Значение Описание
shape Установка формы элемента. Единственным законным значением формы является: rect (top, right, bottom, left)
auto Default value. Никакое резание не применяется.
inherit Определяет, что значение属性 clip должно быть получено от родительского элемента.

Технические детали

Default value: auto
Инheritability: no
Версия: CSS2
JavaScript синтаксис: object.style.clip="rect(0px,50px,50px,0px)"

Более примеров

Установка формы элемента
Этот пример показывает, как можно установить форму элемента. Этот элемент обрезается по форме, а затем отображается.

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0
  • предыдущая страница clear
  • Следующая страница clip-path