CSS свойство clip

CSS свойства

Определение и применение

CSS свойство clip определяет размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым (остальное обрезается).

Свойство clip не работает с элементами у которых значение свойства overflow равно visible.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
clip1.01.07.01.08.012.0

CSS синтаксис:

clip:"auto | shape | initial | inherit";

JavaScript синтаксис:

object.style.clip = "rect(50px,50px,50px,50px)"

Значения свойства

ЗначениеОписание
autoОбрезка не применяется к элементу. Это значение по умолчанию.
shapeОбрезает элемент. Единственное допустимое значение: rect (Top, Right, Bottom, Left).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Для запоминания порядка указания значений при обрезке, можно использовать английское слово TRouBLe(где T - top, R - right, B - bottom, L - left).

<!DOCTYPE html>
<html>
<head>
<title>Свойство float.</title>
<style> 
.test {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,250px,60px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(75px) - Right(200px) - Bottom(250px) - Left(60px). */
}
.test1 {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,200px,60px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(75px) - Right(200px) - Bottom(200px) - Left(60px). */
margin-left : 175px; /* указываем внешний отступ для смещения изображения */
}
.test2 {
position : absolute; /* задаём абсолютное позиционирование элемента. */
clip : rect(125px,225px,250px,5px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(125px) - Right(2250px) - Bottom(250px) - Left(5px). */
margin-left : 425px; /* указываем внешний отступ для смещения изображения */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "test">
		<img src = "nich.jpg" alt = "nich" class = "test1">
		<img src = "nich.jpg" alt = "nich" class = "test2">
	</body>
</html>
Пример использования свойства clip.
Пример использования свойства clip.
CSS свойства