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!
Comment rembourser Douyin rechargé Doucoin
Introduction aux raisons pour lesquelles le bureau à distance ne peut pas se connecter
Les principaux composants qui composent le CPU
Comment utiliser la fonction max
Comment utiliser insertBefore en javascript
Que signifie le réseau Apple LTE ?
Comment vérifier si le port 445 est fermé
js obtient l'heure actuelle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
