Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code)-tutoriel CSS-php.cn

Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code)

奋力向前

Libérer： 2021-08-03 18:19:47

original

14962 Les gens l'ont consulté

Dans l'article précédent "Comment utiliser le HTML pour créer un formulaire de soumission concis (explication détaillée du code)", je vous ai présenté comment utiliser le HTML pour créer un formulaire. L'article suivant vous présentera comment utiliser CSS pour définir le dégradé de couleur d'arrière-plan. Voyons comment le faire ensemble.

Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code)

Ils peuvent tous représenter n'importe quelle couleur à leur manière, juste sous des angles différents.

En mode RVB, toutes les couleurs peuvent être obtenues en combinant différents rapports énergétiques de rouge, vert et bleu.

Par exemple :

rgb (100%, 0%, 0%) est rouge ;

rgb (100%, 50%, 0%) est orange-rouge ; %) est violet.

Vous pouvez tester ces valeurs séparément dans le navigateur

root { background rgb(100% 0% 0%); }

Copier après la connexion

1 Utilisez une balise `div`.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

2. Définissez la balise <div> à l'intérieur de la balise header. div标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

2、header标签里面设置<div>标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

3、颜色渐变，需要给div设定width和height，宽度和高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient();
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

4、然后设置div的background背景属性，背景颜色渐变就用到-webkit-linear-gradient。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

5、在-webkit-linear-gradient里面写top，设定渐变从顶部开始，到底部结束。写了top就不要写bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top,white,lightblue,skyblue);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

Copier après la connexion

3. Pour le dégradé de couleurs, vous devez définir largeur et hauteur, largeur et hauteur pour div.

rrreee

4. Ensuite, définissez l'attribut d'arrière-plan background de div. Utilisez -webkit-linear-gradient pour le dégradé de couleur d'arrière-plan.

rrreee

5. Écrivez top dans -webkit-linear-gradient et définissez le dégradé pour qu'il commence par le haut et se termine par le bas. Si vous écrivez top, n'écrivez pas bottom.

rrreee Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code) 6. Définissez l'ordre du dégradé des couleurs. Vous pouvez définir plus de couleurs.