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

126 • Глава 3. Линованная бумага

Webkit также поддерживает значение text, однако его можно использовать только в свой-
стве с префиксом -webkit. Это ключевое слово превращает текст в маску: вы видите фон
только под буквами, а все остальное фоновое пространство, лежащее за пределами текста,
скрывается. Мне такой эффект очень нравится, но он вряд ли попадет в спецификацию.
Более подробную информацию и примеры вы найдете на страницах http://www.css3.info/
webkit-introduces-background-cliptext, http://trentwalton.com/2010/03/24/css3-background-
clip-text, и http://trentwalton.com/2010/04/06/css3-background-clip-font-face.
Помимо обрезки фона по краю рамки, свойство background-clip можно применять для
решения следующих задач:
• удаление одноцветного фона или фонового изображения из-под пунктирной или
точечной рамки;
• имитация двойной рамки с помощью content-box: одна рамка настоящая, а вторую
имитируют поля внутренней области элемента;
• обрезка фона таким образом, чтобы он не вылезал за пределы скругленных углов
и кромок элемента, как иногда случается в браузерах на базе Webkit. Для этого при-
меняется ключевое слово padding-box (см. http://tumble.sneak.co.nz/post/928998513/
fixing-the-background-bleed).

Таблица 3.4. Поддержка свойства background-clip в браузерах
IE Firefox Opera Safari Chrome

Да, начиная Да, начиная с версии 4; Да Да, начиная с версии 3, Да
с версии 9 частично, начиная с вер- с префиксом -webkit-;
сии 1, с префиксом -moz- частично, начиная
с версии 5

К счастью, CSS3 позволяет изменить поведение по умолчанию. Вы можете управлять
местоположением фона по отношению к рамкам, применяя свойство background-
clip. Значение по умолчанию, border-box, соответствует стандартному варианту
оформления, когда фон есть и под внутренней областью, и под рамками. Со зна-
чением padding-box фон обрезается по внутреннему краю рамки, под полями
внутренней области элемента:
#paper {
float: left;
margin: 40px;
padding: 3.2em 1.6em 1.6em 1.6em;
border-width: 0 0 0 50px;
-moz-border-image: url(images/edge.png) 0 0 0 50 round;
-webkit-border-image: url(images/edge.png) 0 0 0 50
¬ round;
border-image: url(images/edge.png) 0 0 0 50 round;
background: url(images/paperlines.gif) #FBFBF9;
background: url(images/thumbtack.png) 50% 5px no-repeat,

www.trk.kg