Создание настраиваемой градиентной границы с прозрачностью и радиусом границы ⇐ CSS

[Anonymous]

CSS не поддерживает градиентные границы. Вы можете столкнуться с некоторыми статьями или видео на YouTube, представляющих обходные пути для этого, но они обычно имеют оговорки, такие как не поддержание границы-радиуса или не поддерживают прозрачность. Моя цель - создать общее решение без этих предостережений. Теперь оставайтесь со мной немного, мне нужно будет взять несколько обхода, чтобы объяснить, что я попробовал, и какова моя текущая проблема. < /P>
Моя конечная цель - создать свойства «утилиты» легко объявить градиентные границы. Они будут выглядеть так:

Код: Выделить всё

gradientBorder: 'linear-gradient(deg, color1, color2)'< /code>
gradientBorderWidth: '2px'< /code>
gradientOffset: '2px'

Теперь, как я буду создавать такие свойства, спросите вы? Использование функции от Pandacss называется утилит < /p>
Panda просматривает ваши файлы и генерирует статические CSS во время сборки, что позволяет создавать такие функции, как утилиты, условия и многое другое. Если вы заинтересованы, посмотрите на документацию. При этом, вот моя текущая попытка создать утилиты: < /p>

Код: Выделить всё

gradientBorder: {
values: { type: 'string' },
transform(value: string) {
return {
'--gradient-border-background-image': value,
'--after-inset':
'calc(var(--gradient-border-width, 2px) + var(--gradient-border-offset, 0px) + 1px)',
'--gradient-border-start':
'calc(var(--parent-h, 48px) / 2 + var(--gradient-border-offset, 0px))',
'--gradient-border-end':
'calc(var(--gradient-border-start) + var(--gradient-border-width, 2px))',

'&::after': {
content: '""',
display: 'inline-block',
position: 'absolute',
inset: 'calc(var(--after-inset) * -1)',
pointerEvents: 'none',

backgroundImage: 'var(--gradient-border-background-image)',
maskImage: `radial-gradient(transparent calc(var(--gradient-border-start) - 1px), black var(--gradient-border-start), black var(--gradient-border-end), transparent calc(var(--gradient-border-end) + 1px))`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
},
}
},
},

gradientBorderWidth: {
values: { type: 'string' },
transform(value: string) {
return {
'--gradient-border-width': value,
}
},
},

gradientBorderOffset: {
values: { type: 'string' },
transform(value: string) {
return {
'--gradient-border-offset': value,
}
},
},
},
< /code>
This does the following:

[*]Creates an ::after
[*]Positions it absolutelly using inset

[*] Фон :: after IS Значение утилиты (которое будет линейным градиентом)
У него есть маска- Изображение, которое создаст круговую прозрачную «отверстие» в середине формы < /li>
< /ul>
Результат < /p>
Результат выглядит нравится то, что я хочу. Тем не менее, в моем нынешнем подходе есть одно большое предостережение: он поддерживает только круги! Я тоже хочу поддерживать округлые прямоугольники! прямоугольники. Альтернативу, я мог бы использовать SVG или изображение в качестве маски. Но у этого была бы другая проблема: я не могу получить доступ к CSS-varibals внутри URL () . Это связано с тем, что вызов переменной с var () сделает URL недействительным из -за скобок, а избегание скобки не позволит CSS «видеть», которая как переменная. И если я не могу получить доступ к переменным CSS внутри URL (), я не могу использовать пограничную, и пограничный сет, чтобы вычислить SVG! быстро столкнулся с теми же вопросами, упомянутыми выше. В данный момент у меня нет никакой другой идеи, и я был бы благодарен, если бы кто -то мог дать мне предложения. Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... der-radius