Сжатие: свойство 'clip'

Сжимаемая область определяет, какая часть выводимого содержимого

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

'clip'

Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.

Значения имеют следующий смысл:

auto

Сжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента.

<shape>

В CSS2 верными значениями для <shape> являются: rect (<top> <right> <bottom> <left>) где <top>, <bottom> <right>, а <left> специфицирует смещение относительно соответствующих сторон бокса.

<top>, <right>, <bottom> и <left> могут иметь или значение <length>, или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)

Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.

Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Пример(ы):

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие.

Содержание раздела

---

---