CSS-свойство `clip`

Базовая поддержка Ограниченная доступность

Эта функция не входит в Baseline, поскольку не работает в некоторых наиболее широко используемых браузерах.

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры всё ещё могут её поддерживать, она уже могла быть удалена из соответствующих веб-стандартов, может находиться в процессе удаления или может сохраняться только в целях совместимости. Избегайте её использования и, если возможно, обновите существующий код; при принятии решения воспользуйтесь таблицей совместимости внизу этой страницы. Имейте в виду, что эта функция может перестать работать в любое время.

Предупреждение: Авторам рекомендуется использовать свойство clip-path.

Свойство clip в CSS определяет видимую часть элемента. Свойство clip применяется только к абсолютно позиционированным элементам — то есть элементам с position:absolute или position:fixed.

Синтаксис

/* Keyword value */
clip: auto;

/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);

/* Global values */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

Значения

Это свойство задаётся одним значением из следующего списка:

rect()

Прямоугольник, заданный с помощью функции rect() вида rect(<top>, <right>, <bottom>, <left>). Значения <top> и <bottom> являются смещениями от внутреннего края верхней границы блока, а <right> и <left> — смещениями от внутреннего края левой границы блока, то есть от границы области внутренних отступов.

Значения <top>, <right>, <bottom> и <left> могут быть либо <length>, либо auto. Если значение для любой из сторон равно auto, элемент обрезается по внутреннему краю границы этой стороны.

Примечание: Функция rect() <shape>, используемая в устаревшем свойстве clip, отличается от функции rect() в CSS, используемой для определения <basic-shape> в CSS.

auto: Элемент не обрезается (значение по умолчанию). Это отличается от rect(auto, auto, auto, auto), которое обрезает элемент по внутренним краям его границ.

Формальное определение

Начальное значение	auto
Применяется к	абсолютно позиционированным элементам
Наследуется	нет
Вычисленное значение	<code>auto</code>, если задано как <code>auto</code>, иначе прямоугольник с четырьмя значениями, каждое из которых равно <code>auto</code>, если задано как <code>auto</code>, или вычисленной длине в противном случае
Тип анимации	a <a href="/en-US/docs/Web/CSS/Reference/Values/shape#interpolation" title="Значения типа данных CSS <shape>, представляющие собой прямоугольники, интерполируются по верхней, правой, нижней и левой составляющим, каждая из которых рассматривается как действительное число с плавающей запятой.">прямоугольник</a>

Формальный синтаксис

clip = 
  <shape> |
  auto

<shape> = 
  rect(<top>, <right>, <bottom>, <left>)

Примеры

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

<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    alt="Graphic clipped to bottom right" />
</p>

.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

Спецификации

Спецификация
Модуль маскирования CSS, уровень 1 # propdef-clip

Совместимость с браузерами

	Для компьютеров					Для мобильных устройств
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`clip`	1	12	1	7	1 Safari неправильно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	18	4	14	1 Safari на iOS неправильно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	1.0	4.4	1 WebView на iOS неправильно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.
`auto`	1	79	1	15	1	18	4	14	1	1.0	4.4	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip