W3docs
ru
Войти

CSS свойство clip

The CSS clip property applies only to absolutely positioned elements, that are elements with position: absolute or position: fixed.Try Examples.

Свойство 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

clip: auto | shape | initial | inherit;

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

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

<!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>
Попробуйте сами »

Результат

Свойство CSS clip

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

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

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

<!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>
Попробуйте сами »

Значения

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

Практика

Практика

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