Серверное время 2018-12-13 20:25:18
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Свойства CSS
CSS по категориям
Статистика
Яндекс.Метрика
Реклама
Реклама

clip

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Возможно неправильное отображение
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов.
Синтаксис
clip: rect(Y1, X1, Y2, X2) | auto | inherit
Аргументы
В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1.
Рис.1. Значение свойства clip
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>clip</title>
<style type="text/css">
#layer {
position: absolute; /*Абсолютное позиционирование*/
clip: rect(40px, auto, auto, 40px); /*Прячем часть текста*/
width: 200px; /*Ширина блока*/
color: white; /*Цвет текста*/
background: #7f4c3e; /*Цвет фона*/
border: 1px solid black;/*Параметры рамки*/
padding: 10px; /*Поля вокруг текста*/
}
</style>
</head>
<body>
 <div id="layer1">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </div>
</body>
</html>
Демонстрация примера
Объектная модель
[window.]document.getElementById("elementID").style.clip
Примечание
Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px). Также Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz