Border image

Октябрь 21, 2010 ||  css ||  комментарии

Очень удобная штука если вам надо сделать что то типа такого:

border-image
<div class="infobox"> You will need ... </div>
.infobox{
    border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;
}

'30 35 /' … – первые два значения это отступы внутрь картинки, которые “разрезают” картинку на 9 частей, то есть 30px сверху и снизу, 35px справа и слева, вообщем точно также как у padding. Вот такая у меня получилась картинка:

Border Image

Не знаю почему но значения без размерности это пикселы, для процентов надо ставить знак процентов. ..'/ 30px 35px' – размеры бордера, в который будет “вписано” то, что вы “нарезали” первыми значениями. К примеру если бордер – 10px 20px, то уголок исходной картинки 30px на 35px сожмется до 10×20.

Border Image

repeat – определяет как будут себя вести остальные области картинки при растягивании. В данном случае – повторяться. Другие варианты:
stretch – масштабируется;
round – повторяется но с округлением, так чтобы в имеющуюся область вписалось целое количество частей, имеет смысл когда вам надо выложить узоры. Но такая запись не работает в опере, ширину бордера надо вынести отдельно, поэтому:

.infobox{
    ...
    border-width: 30px 35px; 
    border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;
}

пример

Chrome 16

В Chrome 16 обьявилась бага фича с border-image, элемент почему то не заполняется фоном. Вот так это выглядит:

Border Image

2012-01-07

Оказалось что это не бага а документированное поведение – для того чтобы использовать центральную часть картинки для заполнения фоном элемента нужно указать ключевое слово fill. То бишь:

.infobox{
    border-image: url("../img/infobox.png") 30 35/ 30px 35px fill repeat;
}

В FF это приводит к неожиданному поведению, поэтому пока для FF надо писать по старому. Либо можно поступить иначе:

.infobox{
    background-color: #FFF;
    background-clip: padding-box; 
}
Июнь 2013

Проверил в Chrome, Firefox, Opera, работает такая запись:

.infobox {
    …
    border: 30px solid transparent;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-image: url(../img/infobox.png) 30 35 / 30px 35px repeat;
}

По идее должно было быть достаточно border-width: 30px 35px, но не работает в Firefox.

По теме:

comments powered by Disqus