CSS :: Свойство clip

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

Свойство устарело! Используйте вместо него clip-path.

Характеристики

Значение по умолчанию: auto.
Применяется: к абсолютно и фиксированно позиционированным элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.clip="value".

Синтаксис

clip: rect(y1,x1,y2,x2) | auto

Значения

rect(y1,x1,y2,x2) – задает параметры прямоугольной области, в которой содержимое элемента будет видно на странице; через запятую указываются расстояния от края элемента до верхнего, правого, нижнего и левого края оставляемой области (см. рисунок №1). При этом расстояния y1 и y2 отсчитываются от верхнего края элемента, соответственно, до верхего и нижнего края оставляемой (видимой) области, а расстояния x1 и x2 отсчитываются от левого края элемента, соответственно, до правого и левого края оставляемой (видимой) области, так что при указании значений следует быть внимательным и следить за тем, чтобы во избежание полной обрезки элемента выполнялись условия y1<y2 и x1>x2. Если с какой-то стороны обрезать элемент не требуется, то разрешается использовать ключевое слово auto. Для указания размеров разрешается использовать все доступные в CSS единицы измерения (смотреть).
auto – элемент обрезаться не будет, что соответствует rect(auto,auto,auto,auto).

Рис. №1. Схема отсчета некоторых значений свойства clip

Ссылки

Официальный сайт W3C: https://drafts.fxtf.org/css-masking-1/#propdef-clip

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/clip

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		padding: 5px;
		border: solid 8px red;
		width: 400px;
		height: 150px;
		left: 20px;
		overflow: scroll;
		clip: rect(6px, 385px, 135px, 6px);
		}
		
		.pos_1{
		position: absolute;
		top: 20px;
		background-color: yellow; 
		}
		
		.pos_2{
		position: fixed;
		top: 190px;
		background-color: violet;  
		}
	</style>

</head>
<body>
	<p class="pos_1">
		Позиционирован, как absolute. Отсекаем полосы прокрутки 
		и делаем тоньше границы. 
	</p>
	
	<p class="pos_2">
		Позиционирован, как fixed. Отсекаем полосы прокрутки 
		и делаем тоньше границы.
	</p>
</body>
</html>

Пример №1