Как создать градиентные границы в 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).
Наконец, требуется прозрачная граница, чтобы отделить рамку от поля заполнения (в противном случае они были бы идентичны, и первый градиент полностью покрывал бы второй).
Вот пример:
Вот и всё!
