Градиент границы

Как создать градиентные границы в CSS.

Чтобы применить градиент к границе, наиболее простой подход - использовать свойство border-image (аналогично тому, как это делается с фоновыми градиентами):


.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

'1' после объявления linear-gradient - это значение границы изображения-фрагмента. Используя 1, мы указываем, что нам нужна единственная граничная область.

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


.btn-gradient-1 {
  /* .. */
  border-image: linear-gradient(to right, darkblue, red) 1;
  border-radius: 50em; /* 👈 not working */
}


Альтернативный подход

Существует альтернативный подход, основанный на свойстве background-clip, который совместим со свойством border-radius.


.btn-gradient-2 {
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, darkblue, red) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

Значения padding-box и border-box, указанные после линейных градиентов, представляют значения background-clip.

Первый линейный градиент ограничен рамкой заполнения (т. e. Всем содержимым элемента, кроме границ). Это «поддельный» градиент, потому что мы используем один и тот же цвет дважды; мы используем его, чтобы замаскировать второй фоновый градиент цветом фона.

Второй градиент находится ниже первого и используется для применения желаемых цветов градиента. В отличие от первого, второй градиент покрывает область границы (background-clip: border-box).

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


Вот пример:

Вот и всё!


🔖 Выбор по тегам ×

Top