Border-image
Очень удобная штука если вам надо сделать что то типа такого:
<div class="infobox"> You will need ... </div> border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;30 35 / … – первые два значения это отступы внутрь картинки, которые “разрезают” картинку на 9 частей, то есть 30px сверху и снизу, 35px справа и слева, вообщем точно также как у padding. Вот такая у меня получилась картинка:
Не знаю почему но значения без размерности это пикселы, для процентов надо ставить знак процентов.
../ 30px 35px – размеры бордера, в который будет “вписано” то, что вы “нарезали” первыми значениями. К примеру если бордер – 10px 20px, то уголок исходной картинки 30px на 35px сожмется до 10×20.
repeat – определяет как будут себя вести остальные области картинки при растягивании. В данном случае – повторяться. Другие варианты:
stretch – масштабируется;
round – повторяется но с округлением, так чтобы в имеющуюся область вписалось целое количество частей, имеет смысл когда вам надо выложить узоры.
Но такая запись не работает в опере, ширину бордера надо вынести отдельно, поэтому:
border-width: 30px 35px;
border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;Chrome 16
В Chrome 16 обьявилась бага фича с border-image, элемент почему то не заполняется фоном.
Вот так это выглядит:
2012-01-07
Оказалось что это не бага а документированное поведение – для того чтобы использовать центральную часть картинки для заполнения фоном элемента нужно указать ключевое слово fill.
То бишь:
border-image: url("../img/infobox.png") 30 35/ 30px 35px fill repeat;
В FF это приводит к неожиданному поведению, поэтому пока для FF надо писать по старому.
Либо можно поступить иначе:
background-clip: padding-box;
background-color: #FFF;