Как можно сверстать градиентный бордер на градиентном фоне?

Для создания градиентного бордера на градиентном фоне в HTML можно использовать псевдоэлементы и свойство background-clip.

Прежде всего, убедитесь, что вы установили градиентный фон для элемента, на котором вы хотите создать градиентный бордер. Для этого можно использовать свойство background, задав градиентные значения через функцию linear-gradient.

Далее, для создания градиентного бордера, мы будем использовать псевдоэлемент ::before или ::after. Мы можем применять на них такой же градиентный фон, как на основном элементе.

.element {
    position: relative; /* чтобы псевдоэлемент появился на переднем плане */
    background: linear-gradient(to right, #ff0000, #00ff00); /* градиентный фон */
}

.element::before {
    content: ''; /* необходимо указывать content для псевдоэлементов */
    position: absolute;
    top: -10px; /* отступ от верхней границы элемента */
    left: -10px; /* отступ от левой границы элемента */
    right: -10px; /* отступ от правой границы элемента */
    bottom: -10px; /* отступ от нижней границы элемента */
    z-index: -1; /* чтобы псевдоэлемент оказался под основным содержимым элемента */
    background: linear-gradient(to right, #0000ff, #ffff00); /* градиентный фон псевдоэлемента */
    background-clip: content-box; /* градиентный фон будет занимать только содержимое (без padding и border) */
}

В этом примере мы создали градиентный бордер размером 10 пикселей вокруг элемента. Псевдоэлемент ::before с градиентным фоном расширяется за пределы самого элемента, чтобы создать эффект градиентного бордера.

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