Maison > Article > interface Web > Code d'implémentation de la couleur du dégradé linéaire en CSS3
Code d'implémentation de la couleur du dégradé linéaire en CSS3
- 不言original
- 2018-08-20 11:48:052152parcourir
Le contenu de cet article concerne le code d'implémentation du dégradé linéaire en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
css3 Le dégradé est divisé en dégradé linéaire (linéaire) et dégradé radial (radial). Étant donné que différents moteurs de rendu ont une syntaxe différente pour implémenter les dégradés, nous analysons ici uniquement son utilisation sur la base de la syntaxe standard du W3C des dégradés linéaires. Vous pouvez vous référer aux informations pertinentes pour le reste. La syntaxe a été prise en charge par les navigateurs tels que IE10+, Firefox19.0+, Chrome26.0+ et Opera12.1+.
Syntaxe du dégradé linéaire :
linear-gradient(to bottom,#FFF,#999)
Paramètres : Le premier paramètre précise la direction du dégradé, qui peut être exprimée en angle ou en anglais : 
Non. Les deuxième et troisième paramètres représentent le point de départ et le point final de la couleur. Il peut y avoir plusieurs valeurs de couleur
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left,yellow,blue);
}
</style>
</head>
<body> <p>右下角向左上角的线性渐变背景</p>
</body>
</html>L'effet est. comme suit :
Recommandations associées :
[CSS3]-Color RGBA et gradient_html/css_WEB-ITnose
Combat pratique du dégradé linéaire de couleur en CSS3_html/css_WEB-ITnose
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!