clip

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

Предупреждение: В тех случаях, когда это возможно, авторам рекомендуется использовать новое свойство 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;

Значения

<shape>

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

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

auto

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

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

Начальное значение	`auto`
Применимо к	абсолютно позиционированным элементам
Наследуется	нет
Вычисленное значение	`auto` если указано как `auto`, иначе прямоугольник со четырьмя значениями, каждое из которых равно `auto` если указано как `auto` или вычисленной длине в противном случае
Тип анимации	прямоугольник

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

clip = 
  <rect()>  |
  auto      

<rect()> = 
  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 Masking Module Level 1 # clip-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`clip`	1	12	1	7	1 Safari неправильно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	18	4	14	1 Safari неправильно интерпретирует `clip: auto` как `clip: rect(auto, auto, auto, auto)`.	1.0	37
`auto`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Это свойство устарело. Используйте clip-path вместо него.
Связанные свойства CSS:

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