Как убрать мелкие контуры в углах?
Я работаю над полем ввода с градиентной границей при наведении и фокусе. Я придумал этот фрагмент, который технически работает:
<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
Однако он создает крошечные двойные рамочки, похожие на ореолы, на каждом углу. Пожалуйста, взгляните на прикрепленное изображение:
Методом проб и ошибок я обнаружил, что причиной этого является фоновое градиентное изображение. Если его удалить, крошечные ореолы исчезнут. Его также нет при наведении курсора или фокусировке. Есть ли способ это исправить?
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
50
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Необходимо использовать дополнительный элемент или псевдоэлемент. Для примера:
<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>
Интересно, почему это происходит? Это проблема Tailwind или просто общая ошибка CSS?
—
24.08.2024 23:21
Попутный ветер — это всего лишь инструмент.
—
25.08.2024 00:16
Я поэкспериментировал с этим больше, и div внутри div ведет себя точно так же. Вот как работает CSS.
—
25.08.2024 04:13
Вы используете вот так →
<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>
Другие вопросы по теме
Как изменить форму div, сохранив при этом его функциональность как обычного div?
Как применить штрих-дашаррай с использованием попутного ветра
Стили попутного ветра не применяются к компонентам внутри Shadcn Sheet
TailwindCSS — 1 Градиент на нескольких элементах
Как реализовать арочную тень для изображения в React с помощью Tailwind CSS?
Вложенный scss не работает с angular 18 с попутным ветром
Почему логотипы не соответствуют друг другу?
Как создать нижнюю границу градиента в Tailwind CSS?
Метод classList.add не работает, и компонент перерисовывается при нажатии на ввод файла в Svelte
Анимация индикатора выполнения в виде пунктирной линии
Похожие вопросы
CSS — расположение раскрывающегося меню
Как изменить форму div, сохранив при этом его функциональность как обычного div?
Кнопка «Отправить» закрывает диалоговое окно, но затем оно открывается снова
Замените флажки контактной формы 7 флажками с пользовательскими изображениями CSS
Невозможно прокручивать два элемента одновременно
CSS неправильно отображается на iPhoneX
Как сделать отступ заголовка под нумерованным списком в Rmarkdown, связанном с HTML?
Столбцы в другой таблице той же ширины
Как сделать фоновое отображение на весь экран (Safari)
Как создать контейнеры DIV меньшего размера внутри родительского DIV?
Это интересно. Если я увеличу масштаб браузера до 500%, это почти исчезнет, но если я уменьшу масштаб до 50%, это станет более заметным, что является противоположностью того, что я ожидал. И поведение одинаковое как в Firefox, так и в Chrome (проверено на macOS).