<shape>
Устаревшее: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут её поддерживать, она может быть удалена из соответствующих веб-стандартов, находится в процессе удаления или сохранена только для совместимости. Избегайте её использования и, если возможно, обновите существующий код; см. таблицу совместимости в нижней части этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
Тип данных <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);
}
Спецификации
Совместимость браузеров
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
shape |
1 | 12 | 1 | 9.5 | 1.3 | 18 | 4 | 14 | 1 | 1.0 | 37 |
rect |
1 | 12 | 1 | 9.5 | 1.3 | 18 | 4 | 14 | 1 | 1.0 | 37 |
См. также
- Связанное свойство CSS:
clip
© 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/shape
