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

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

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

В качестве примера будем использовать обычный блок, заполнив его просто текстом.
Задаем размеры блока, верхнюю и нижнюю границы. Если задать border-radius граница закруглится только с внешней стороны.
Верхняя и нижняя границы заданы, создаем левую и правую границы. Для этого указываем начальные точки градиента – левую верхнюю и правую верхнюю 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:
      -webkit-linear-gradient(top, #2589AE 0%, #7DC0FF 100%),
      -webkit-linear-gradient(top,#2589AE 0%,#7DC0FF 100%);
    background-image:
      -moz-linear-gradient(top, #2589AE 0%, #7DC0FF 100%),
      -moz-linear-gradient(top, #2589AE 0%, #7DC0FF 100%);
    background-image:
      -o-linear-gradient(top, #2589AE 0%, #7DC0FF 100%),
      -o-linear-gradient(top, #2589AE 0%, #7DC0FF 100%);
    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:
      -webkit-linear-gradient(left, #2589AE 0%, #7DC0FF 100%), 
      -webkit-linear-gradient(left, #2589AE 0%, #7DC0FF 100%);
   background-image: 
      -moz-linear-gradient(left, #2589AE 0%, #7DC0FF 100%), 
      -moz-linear-gradient(left, #2589AE 0%, #7DC0FF 100%);
   background-image: 
      -o-linear-gradient(left, #2589AE 0%, #7DC0FF 100%),
      -o-linear-gradient(left, #2589AE 0%, #7DC0FF 100%);
   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; 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 20px solid transparent; 
   -moz-border-image: -moz-linear-gradient(top, #2589AE 0%, #7DC0FF 100%);
   -webkit-border-image: -webkit-linear-gradient(top, #2589AE 0%, #7DC0FF 100%);
   border-image: linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%);
   border-image-slice: 1;
   }

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

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

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

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

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

.box {  
   width: 100%;
   height: 270px;
   background: #eee;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 20px solid transparent;
    -moz-border-image: -moz-linear-gradient(top left,red 0%, orange 16%,yellow 33%, green 50%,blue 67%, darkblue 83%,fiolet 100%);
    -webkit-border-image: -webkit-linear-gradient(top left,red 0%, orange 16%,yellow 33%, green 50%,blue 67%, darkblue 83%,fiolet 100%));
    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;
}

Поэксперементируем
Используя градиент “Круги на воде” из предыдущей статьи, получаем:

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

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

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

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




Источник