Тип CSS `<shape>`
Базовая поддержка Ограниченная доступность
Эта функция не входит в Baseline, поскольку не работает в некоторых из наиболее широко используемых браузеров.
Устарело: Эта функция больше не рекомендуется. Некоторые браузеры могут по-прежнему поддерживать её, однако она уже могла быть удалена из соответствующих веб-стандартов, может находиться в процессе удаления или может сохраняться только для обеспечения совместимости. Избегайте её использования и по возможности обновите существующий код; примите решение, ознакомившись с таблицей совместимости внизу этой страницы. Учтите, что эта функция может перестать работать в любой момент.
<shape> — это тип данных CSS, определяющий конкретную форму (фигуру) области. Область представляет собой часть элемента, к которой применяется свойство clip.
Примечание: <shape> и rect() работают совместно со свойством clip, которое устарело и было заменено свойством clip-path. По возможности используйте clip-path и тип данных <basic-shape>.
Синтаксис
Тип данных <shape> задаётся с помощью функции rect(), которая формирует область в виде прямоугольника.
rect()
rect(top, right, bottom, left)
Значения
- top
- Значение
<length>, представляющее смещение верхней стороны прямоугольника относительно верхней границы рамки элемента. - right
- Значение
<length>, представляющее смещение правой стороны прямоугольника относительно левой границы рамки элемента. - bottom
- Значение
<length>, представляющее смещение нижней стороны прямоугольника относительно верхней границы рамки элемента. - left
- Значение
<length>, представляющее смещение левой стороны прямоугольника относительно левой границы рамки элемента.
Интерполяция
При анимации значения типа данных <shape> интерполируются по компонентам top, right, bottom и left, каждая из которых рассматривается как вещественное число с плавающей точкой. Скорость интерполяции определяется функцией плавности, связанной с анимацией.
Пример
Пример правильного использования функции rect()
img.clip04 {
clip: rect(10px, 20px, 20px, 10px);
}
Спецификации
| Спецификация |
|---|
| Каскадные таблицы стилей, уровень 2 # value-def-shape |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
shape |
1 |
12 |
1 |
9.5 |
1.3 |
18 |
4 |
14 |
1 |
1.0 |
37 |
1 |
rect |
1 |
12 |
1 |
9.5 |
1.3 |
18 |
4 |
14 |
1 |
1.0 |
37 |
1 |
См. также
- Связанное свойство CSS:
clip
© 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/Values/shape
