CSS свойство clip

Свойство clip позволяет обрезать позиционированный элемент с помощью прямоугольника. Прямоугольник задаётся четырьмя координатами: top, right, bottom, left. Эти значения определяют смещение от края элемента с учётом padding. Порядок rect(top, right, bottom, left) идёт по часовой стрелке, начиная с верхней стороны. Все четыре стороны могут быть заданы как длина или auto. auto является значением по умолчанию.

Свойство clip не работает, если для свойства overflow установлено значение visible.

INFO

При возможности вместо него следует использовать более новое свойство clip-path, так как clip устарел и исключён из спецификации CSS. Для современных браузеров используйте clip-path: inset(top right bottom left) или clip-path: rect(...) в качестве прямой замены.

Начальное значение	auto
Применяется к	Элементам с абсолютным позиционированием.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS2
DOM-синтаксис	object.style.clip = "rect(10px,40px,40px,10px)";

Синтаксис

Синтаксис свойства CSS clip

css

clip: auto | shape | initial | inherit;

Пример свойства clip:

Пример свойства CSS clip со значением auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS clip

В следующем примере прямоугольник обрезает изображение в соответствии с заданными значениями.

Пример свойства clip со значением "rect":

Пример свойства CSS clip со значением shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: rect(0px, 70px, 200px, 0px);
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
auto	Не обрезает элемент. Это значение по умолчанию.	Запустить »
shape	Обрезает элемент. Единственное допустимое значение — `rect(top, right, bottom, left)`.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Какова функция свойства 'clip' в CSS?

Оно предотвращает элемент от занятия места на странице.Оно помогает скрывать части элементов.Оно изменяет цвет элемента.Оно задаёт прямоугольную область для обрезки элемента с абсолютным позиционированием.Оно применяет границу к элементу.

CSS свойство clip ​

Синтаксис ​

Пример свойства clip: ​

Результат ​

Пример свойства clip со значением "rect": ​

Значения ​