Exemple d'introduction de deux types de dégradés en CSS3

不言

Libérer： 2018-08-09 16:41:03

original

3617 Les gens l'ont consulté

Ce que cet article vous apporte est un exemple d'introduction à deux types de dégradés en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

css3
ps : CSS ressemble de plus en plus à un langage. CSS a déjà des variables. Je viens de le voir dans le document. Une fonctionnalité expérimentale.

Dégradé

Le dégradé est divisé en deux types de dégradés, l'un est un dégradé linéaire et l'autre est un dégradé radial

Dégradé linéaire

Le dégradé linéaire est vers le haut , deux modes de dégradé : vers le bas, vers la gauche et vers la droite.

Fonction linear-gradient()

C'est une fonction de CSS. Un dégradé linéaire est constitué d'un axe, la ligne de dégradé. Chaque point a deux couleurs ou plus. Chaque point sur son axe a une couleur indépendante. Afin de créer un dégradé fluide, cette fonction crée également une série de lignes d'ombrage. La couleur de chaque ligne d'ombrage dépend également du point de couleur sur la ligne de dégradé qui la coupe perpendiculairement.
Exemple dintroduction de deux types de dégradés en CSS3

// 渐变轴45度，重蓝色到红色linear-gradient(45deg, blue, red);

Copier après la connexion

Exemple dintroduction de deux types de dégradés en CSS3

// 从右下到左上，蓝色渐变到红色linear-gradient(to left top, blue, red);

Copier après la connexion

Exemple dintroduction de deux types de dégradés en CSS3

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red)

Copier après la connexion

la transparence ps est le dernier paramètre de rgba

Dégradé radial

Un dégradé radial se compose de son point central, de la forme de son bord, de son contour, de sa position et du point final de la valeur de couleur.
Le dégradé radial est constitué d'ellipses continues
Exemple dintroduction de deux types de dégradés en CSS3