Пример
Обрезать изображение:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Попробуйте сами »
Определение clip
CSS свойство clip позволяет указать прямоугольник для обрезки абсолютно позиционированного элемента. Прямоугольник задается в виде четырех координат, все от верхнего левого угла элемента, который нужно обрезать.
Примечание: CSS свойство clip устарело и заменяется на свойством clip-path.
Примечание: CSS свойство clip не работает, если "overflow:visible".
| Значение по умолчанию: | auto |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.clip="rect(0px,50px,50px,0px)" Попробуй |
Поддержка clip
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Синтаксис clip
clip: auto|shape|initial|inherit;
Значения clip
| Значение | Описание | Демонстрация |
|---|---|---|
| auto | Отсечение применяться не будет. Это значение по умолчанию | Демо ❯ |
| shape | Обрезает элемент. Единственное допустимое значение: rect (top, right, bottom, left) | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме clip
CSS Учебник: CSS Позиционирующий
HTML DOM справочник: clip свойство