CSS3 Border-Image

границы изображения боковик

Свойство border-image-outsetborder-image Он не поддерживается ни в одном браузере и делает невозможным полное объявление, поэтому пока не включайте его. Значением по умолчанию является 0.

границы изображения повторите

Свойство border-image-repeat Первое значение сверху и снизу, второе значение слева и справа. Если второе значение опущено, все четыре стороны будут иметь одинаковое значение.

Спецификации в настоящее время определяют четыре возможных значения, но только три хорошо поддерживаются. stretch repeat Если область, выделенная для повторяющегося изображения, не делится точно на ширину изображения, последнее мозаичное изображение может быть обрезано. При использовании round Обратите внимание, что Webkit не поддерживает значение roundrepeat

Значение spaceborder-image

В приведенных выше примерах мы использовали stretchround Вы всегда будете хотеть растянуть градиенты, так как повторение их создает резкие линии, когда одна плитка заканчивается, а другая начинается. И, хотя может показаться, что имеет смысл использовать repeat round

Если бы мы использовали обратное, эффект был бы странным. В то время как верх и низ могут использовать roundrepeatstretchstretch

Граница изображения границы

Как упоминалось ранее, ни один браузер не поддерживает свойства, определенные выше, но Opera, Firefox, Chrome и Safari понимают префиксное свойство border-image Теперь, когда мы понимаем компоненты свойства сокращения, давайте соберем все это вместе.

Правильный синтаксис

  изображение границы: <источник>
 <slice {1,4}> / <width {1,4}> / <outset> <repeat {1,2}>; 

Поскольку outset в настоящее время не поддерживается, мы можем его опустить:

  изображение границы: <источник>
 <slice {1,4}> / <width {1,4}> <repeat {1,2}>; 

Как и все border-imagesborder-image-slice Как правило, срезы имеют ту же ширину, что и border-width И, поскольку у нас есть градиент, мы хотим растянуть изображение, а не разбивать его на части, чтобы не получить резких цветовых переходов. Таким образом, наш код:

  .gradientBox {
     border-image: url (Gradient.png) 34 34 34 34 / 34px 34px 34px 34px растянуть-растянуть;
 } 

который, с повторяющимися значениями, мы можем сузить до:

  .gradientBox {
     border-image: url (radius.png) 34 / 34px stretch;
 } 

Поскольку Opera не понимает border-image-widthborder-width

  .gradientBox {
    ширина границы: 34 пикселя;
   -moz-border-image: url (radius.png) 34 / 34px stretch;
   -webkit-border-image: url (radius.png) 34 / 34px stretch;
   -o-border-image: url (radius.png) 34 растянуть;
    border-image: url (radius.png) 34 / 34px stretch;
 } 

Точно так же наш эффект штампа включает в себя изображение штампа в качестве border-image-source У нас все еще есть проблема Opera с border-width Таким образом, наш код выглядит так:

  .печать {
     ширина границы: 8 пикселей;
    -webkit-border-image: url (stamp.gif) 8 / 8px round;
    -moz-border-image: url (stamp.gif) 8 / 8px round;
    -o-border-image: url (stamp.gif) 8 раунд;
     border-image: url (stamp.gif) 8 / 8px round;
     } 

Ресурсы

На данный момент у вас, надеюсь, есть хорошее понимание того, как создать изображение границы. Есть несколько инструментов, которые помогут вам в этом:

• Характеристики изображения границы W3C
• Инструмент для создания кода CSS с вашим собственным изображением границы
• Сетка поддержки браузера для свойств изображения границы
• Инструмент для визуализации пограничного изображения

Изображения используются в этой статье, чтобы проиллюстрировать эффекты, достигнутые с помощью border-image. Чтобы увидеть это в действии. и просмотрите код, перейдите на демонстрационную страницу .