Градиент в качестве границы блоков

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

Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Рассмотрим несколько вариантов задания цвета границ при помощи градиента.

Градиент границы сверху вниз

В качестве примера будем использовать обычный блок, заполнив его просто текстом.

Задаем размеры блока, верхнюю и нижнюю границы. Если задать border-radius граница закруглится только с внешней стороны.

Верхняя и нижняя границы задаются как обычно: border-top: 20px solid #2589AE ; и border-bottom: 20px solid #7DC0FF ;, создаем левую и правую границы. Для этого указываем начальные точки градиента — левую верхнюю и правую верхнюю background-position: 0 0, 100% 0 ;, и размер фонового изображения background-size: 20px 100% ;. Остается градиент — он самый обычный: цвет верхней границы переходит в цвет нижней сверху вниз.

.box {  
    width: 100%;
    height: 270px;
    border-top: 20px solid #2589AE;
    border-bottom: 20px solid #7DC0FF;
    border-radius: 20px;
    box-sizing: border-box;
      /* Создаем левую и правую границы */
    background-image:
      linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%),
      linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%);
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat;
    background-size: 20px 100%;
}

Градиент границы слева направо

В этом варианте в отличие от первого задаются левая и правая границы, а верхняя и нижняя «дорисовываются».

.box {  
   width: 100%;
   height: 270px;
   padding: 30px 15px;
   margin-bottom: 15px;
   border-left: 20px solid #2589AE; 
   border-right: 20px solid #7DC0FF;
   border-radius: 20px;
   box-sizing: border-box;
   background-image: 
      linear-gradient(to right, #2589AE 0%, #7DC0FF 100%),
      linear-gradient(to right, #2589AE 0%, #7DC0FF 100%);
   background-position: 0 0,  0 100%; 
   background-repeat: no-repeat; 
   background-size: 100% 20px;
}

Второй способ задания градиента

Этот способ основан на использовании CSS3 свойства border-image, с помощью которого код значительно упрощается. Правда еще не все браузеры его поддерживают в достаточной мере.

Это свойство работает только с прямоугольными границами, т.е свойство border-radius здесь не работает.

Принцип работы основан на том, что границе задаются как обычно размер и вид, но цвет прописывается ПРОЗРАЧНЫЙ, и «раскрашивается» при помощи border-image.

Свойство border-image-slice указывает внутренние смещения границы.

            /*  Градиент сверху вниз  */
.box {
   width: 100%;
   height: 270px; 
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%);
   border-image-slice: 1;
   }

            /*  Градиент слева направо  */
.box {  
   width: 100%;
   height: 270px;
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to right, #2589AE 0%, #7DC0FF 100%); 
   border-image-slice: 1;
}  

Диагональный градиент

В отличие от предыдущих вариантов здесь цвет начинает меняться от левого верхнего угла.

Раскрасим эту границу во все цвета радуги.

.box {  
   width: 100%;
   height: 270px;
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to bottom right, red 0%, orange 16%,yellow 33%, green 50%,blue 67%, darkblue 83%,fiolet 100%);
   border-image-slice: 1;
}

Поэксперементируем

Используя градиент «Круги на воде» из предыдущей статьи, получаем:

По-моему неплохие уголки получились?

Чем то напоминает срез дерева (отдаленно конечно).

Просто менял цвета и цифры.

Если в градиенте использовать пиксели, блок должен иметь фиксированные размеры, иначе рисунок «поплывет». Поэтому лучше проценты. Вот так, меняя направление, пропорции и цвета заливки градиента можно создавать настоящие шедевры.