Я работаю над полем ввода с градиентной границей при наведении и фокусе. Я придумал этот фрагмент, который технически работает:
<div class = "rounded-lg bg-gradient-to-tr from-yellow-600 via-red-600 to-purple-600">
<input class = "rounded-lg border border-gray-300 bg-clip-padding px-4 py-2 transition duration-200 hover:border-transparent focus:border-transparent focus:outline-none" />
</div>
https://play.tailwindcss.com/g4r07nPkLe
Однако он создает крошечные двойные рамочки, похожие на ореолы, на каждом углу. Пожалуйста, взгляните на прикрепленное изображение:
Методом проб и ошибок я обнаружил, что причиной этого является фоновое градиентное изображение. Если его удалить, крошечные ореолы исчезнут. Его также нет при наведении курсора или фокусировке. Есть ли способ это исправить?
🤔 А знаете ли вы, что...
HTML5 предоставляет более широкие возможности для работы с мультимедиа, включая аудио и видео без использования плагинов.
Необходимо использовать дополнительный элемент или псевдоэлемент. Для примера:
<div class = "flex h-full flex-col items-center justify-center">
<div class = "relative group rounded-lg">
<input class = "rounded-lg border border-gray-300 bg-clip-padding px-4 py-2 transition duration-200 hover:border-transparent focus:border-transparent focus:outline-none relative z-10" />
<div class = "absolute inset-0 rounded-lg bg-gradient-to-tr from-yellow-600 via-red-600 to-purple-600 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"></div>
</div>
</div>
Вы используете вот так →
<div class= "rounded-lg bg-gradient-
to-tr from-yellow-600 via-red-600
to-purple-600 p-2">
<input class= "rounded-lg border
border-gray-300 bg-clip-padding
px-4 py-2 transition duration-200
hover:border-transparent
focus:border-transparent
focus:outline-none focus:ring-0"/>
</div>