Comment utiliser CSS3 pour obtenir l'effet de dégradé de couleurs de la zone de saisie

Cet article présente principalement comment utiliser CSS3 pour obtenir l'effet de dégradé de couleurs de la zone de saisie. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

css3 a été lancé Cela fait longtemps, même si les grands navigateurs grand public ne sont pas très compatibles avec, notamment IE... Mais en ajoutant des préfixes comme -moz- -webkit-, vous pouvez obtenir de meilleurs résultats sous chrome et Firefox, qui est toujours implémenté par Transition L'effet de transition

obtient un effet de dégradé de couleur par clic pour la bordure. Ce n'est pas seulement un attribut d'ombre de boîte. Sa lueur est comme une lueur uniforme autour d'elle. effet de transition lumineuse.

Avant de continuer à apprendre, vous devez avoir quelques connaissances de base en CSS3. Pour faire tout cela, vous devez comprendre les propriétés Shadow, RGBa et Transition de CSS3, sinon vous ne pourrez pas les comprendre.

1. Créez un effet de zone de texte de bordure lumineuse

<input type="text" class="sdw" />

Ensuite, nous voulons que ce composant d'entrée brille lorsqu'il devient le focus (cliquez) , affiché en bleu, il me suffit d'ajouter un morceau de code CSS :

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

. Les couleurs RVB peuvent être modifiées selon les goûts personnels.

2. Ajoutez un effet de lueur de bordure à tous les composants d'entrée globalement

Si vous souhaitez que toutes les zones de saisie de texte d'une page Web aient cet effet, définissez simplement le CSS globalement. C'est ça.

Ajoutez cette phrase à votre fichier CSS :

input[type=text]:focus,input[type=password]:focus,textarea:focus{}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. plus de contenu connexe. Site Web chinois PHP !

Recommandations associées :

Comment utiliser CSS3 pour créer une simple image de cube translucide 3D

Comment utiliser CSS3 avec Le filtre IE Mirror obtient des effets de dégradé et de projection

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!