Page 119 - Сила CSS3 Освой новейший стандарт

Усложнение фона • 119

Один небольшой недостаток установки «рваного
края» в качестве фонового изображения заключа-
ется в том, что мы не можем управлять его обрезкой
внизу блока div. Возможно, блок оборвется прямо
посередине очередного отверстия в бумаге, а край
настоящего листа из блокнота со спиральным кре-
плением так выглядеть не может (рис. 3.13). Со- Рис. 3.13. Когда картинка с рва-
глашусь, это не трагедия — всего лишь небольшая, ным бумажным краем выбира-
пустячная проблема. Но если ее можно с легкостью ется в качестве повторяющегося
решить, применив возможности CSS, почему бы фонового изображения, вполне
не сделать это? вероятно, что браузер обрежет
ее прямо поперек отверстия
Чтобы исправить ситуацию с помощью CSS3,
нужно выбрать для свойства background-repeat,
представляющего изображение рваного края, значение round — новое значение,
впервые появившееся в CSS3. Оно заставляет браузер повторять изображение
максимальное число раз и, в случае необходимости, масштабировать его, чтобы
избежать обрезки.

К сожалению, на момент написания этой главы значение round поддерживается
только в IE 9 и Opera, причем в Opera его реализация далека от совершенства.
Поэтому запись background-repeat: round в настоящее время использовать не
рекомендуется. К счастью, мы можем полностью отказаться от идеи с фоновым
изображением и вместо этого прибегнуть к помощи нового свойства border-image.

Использование свойства border-image
Помимо (или вместо) цвета и стиля линии CSS3 позволяет связать с рамкой элемен-
та любое изображение. Браузер принимает одно изображение, нарезает его на кусоч-
ки и растягивает или выкладывает эти кусочки мозаикой вдоль всех отрезков рамки.

Предположим, например, что на рис. 3.14 показа-
но изображение, с помощью которого мы хотим Допускается использование раз-
украсить рамку блока div. Верхние 30 пикселов ных значений ширины рамки и
изображения должны выводиться вдоль верхнего ширины соответствующих фраг-
отрезка рамки, правые 25 пикселов — вдоль пра- ментов изображения. Браузер
вого отрезка, нижние 27 — вдоль нижнего и левые масштабирует каждое изобра-
34 — вдоль левого отрезка рамки (рис. 3.15). Эти жение, подгоняя его под ширину
соответствующего отрезка рамки.
значения мы укажем и в качестве ширины рамки,
и в качестве параметров нарезки изображения.

.clouds {
width: 400px;
height: 150px;
border-width: 30px 25px 27px 34px;
border-image: url(clouds.png) 30 25 27 34 stretch;
}

www.trk.kg