Tutoriel CSS3 (10) : Paramétrage de l'instruction CSS3 HSL Color_css3_CSS_Web Production de pages

Production de pages Web Introduction à l'article Webjx : L'utilisation des instructions CSS3 HSL est également utilisée pour définir les couleurs. Quelle est la prochaine étape ? HSLA? Oui, cela a le même effet que RGBA. Les couleurs sont également définies à l'aide de déclarations CSS3 HSL. Quelle est la prochaine étape ? HSLA? Oui, cela a le même effet que RGBA. Article précédent

L'utilisation des déclarations CSS3 HSL est également utilisée pour définir les couleurs. Quelle est la prochaine étape ? HSLA? Oui, cela a le même effet que RGBA.
L'utilisation des déclarations CSS3 HSL est également utilisée pour définir les couleurs. Quelle est la prochaine étape ? HSLA? Oui, cela a le même effet que RGBA.
Article précédent : Tutoriel CSS3 (9) : Définition de la couleur RVB
L'instruction HSL utilise la teinte(H), la saturation(s) et la luminosité(L) pour définir la couleur.
La teinte est dérivée de la roue chromatique : 0 et 360 sont du rouge, les valeurs proches de 120 sont du vert et 240 sont du bleu.
La valeur de saturation est un pourcentage : 0 % est l'échelle de gris, 100 % est la saturation la plus élevée.
La valeur de luminosité est également un pourcentage : 0 % est la plus sombre, 50 % est la moyenne et 100 % est la valeur. le plus brillant.
Pensées aléatoires : Pourquoi la « lumière » ? Peut-être que je suis plus habitué à la « Luminosité » dans Photoshop...
Compatibilité des navigateurs :
Actuellement, HSL et HSLA sont bien pris en charge par les navigateurs Firefox, Google Chrome et Safari, et ne nécessitent aucun préfixe CSS3 HSL

La démonstration ci-dessus est implémentée par le style suivant
div.hslL1 { background:hsl(320, 100 %, 50%); hauteur:20px; } div.hslL2 { background:hsl(320, 50%, 50%); hauteur:20px; hauteur : 20px ; } div.hslL4 { background:hsl(202, 100 %, 50 %); hauteur :20px; .hslL6 { background:hsl(202, 100%, 75%); height:20px; }
Prise en charge du navigateur :

Firefox(3.05…)

Google Chrome(1.0.154 … )

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2 . 1 windows...) CSS3 HSLA

L'effet ci-dessus est obtenu par le style suivant :
div.hslaL1 { background:hsla(165, 35%, 50 %, 0,2) ; hauteur : 20 px ; } div.hslaL2 { background : hsla (165, 35 %, 50 %, 0,4); hauteur : 20 px ; , 0,6); hauteur :20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0,8); ); hauteur:20px ; }
Prise en charge du navigateur :

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156) …)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

Ce qui précède est le tutoriel CSS3 (10) :Définition de l'instruction CSS3 HSL color_css3_CSS_Web contenu de production de page, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !