Декорирование Интернета с помощью CSS-изображений границ

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

CSS изменил все это. Несколько строк кода — все, что вам нужно, чтобы украсить ваш сайт довольно сложными рамками. Эта статья покажет вам, как вы можете это сделать.

Свойства изображения границы

Обычный способ оформления границ — использование предустановленных правил стиля границ. Это: dotteddashedsoliddoublegrooveridgeinsetoutset

Эти стили уже дают вам немного выбора. Но вы можете пойти еще дальше и добавить привлекательные фоновые изображения к своим границам со следующими свойствами CSS.

Свойство border-image-source

С помощью этого свойства вы назначаете фоновое изображение границе элемента. Значение обычно является URL изображения:

 element {
  border-image-source: url('myimage.png');
}

Вы обнаружите, что CSS-градиент работает так же хорошо:

 element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

В браузере это выглядит примерно так:

Если для этого свойства задано значение noneborder-style Поэтому рекомендуется использовать border-style

Изображение, которое вы используете, не должно соответствовать ширине и высоте вашей рамки. Прелесть CSS-изображений границ заключается в том, что маленькое изображение — это все, что вам нужно для украшения границы элемента любой ширины и высоты, включая элементы, которые быстро адаптируются к различным размерам экрана.

Свойство border-image-slice

После выбора изображения с помощью свойства border-image-sourceborder-image-slice

 element {
  border-image-slice: 19;
}

Давайте углубимся в детали. Это свойство создает внутренние смещения сверху , справа , снизу и слева . Смещения в конечном итоге разбивают ваше маленькое изображение на девять областей: четыре угла , четыре края и середину .

Вы можете указать от одного до четырех чисел или процентные значения. Когда вы указываете четыре значения, они применяются к верхнему, правому, нижнему и левому смещениям. Если вы пропустите левое смещение, оно будет таким же, как правое. Если вы пропустите нижнее смещение, оно будет таким же, как и верхнее. Пропуск значения для правого смещения сделает его таким же, как и верхний. Если вы используете только одно значение, оно будет использоваться для всех четырех смещений.

 <div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

 .box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19; 
}

 .box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-fill.png);
  border-image-slice: 19 fill;
}

 .box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19;
  border-image-width: 3;
}

 border-image-repeat