Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci)-tutorial css-php.cn

Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci)

奋力向前

Lepaskan： 2021-08-03 18:19:47

asal

14962 orang telah melayarinya

Dalam artikel sebelumnya "Cara menggunakan html untuk membuat borang penyerahan ringkas (penjelasan kod terperinci) ", saya memperkenalkan cara menggunakan html untuk membuat borang. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css untuk menetapkan kecerunan warna latar belakang Mari kita lihat cara melakukannya bersama-sama.

Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci)

Mereka semua boleh mewakili mana-mana warna dengan cara mereka sendiri, hanya dari sudut yang berbeza.

Dalam mod RGB, semua warna boleh diperoleh dengan menggabungkan nisbah tenaga berbeza merah, hijau dan biru.

Contohnya:

rgb (100%, 0%, 0%) adalah merah; ;

rgb (80%, 0%, 100%) berwarna ungu.

Anda boleh menguji nilai ini secara berasingan dalam penyemak imbas

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

Salin selepas log masuk

1. Gunakan teg

div

2. Tetapkan teg

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

Salin selepas log masuk

di dalam teg

. header<div>

3. Untuk kecerunan warna, anda perlu menetapkan

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

Salin selepas log masuk

dan

, lebar dan tinggi untuk div. widthheight

4. Kemudian tetapkan

<!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>

Salin selepas log masuk

atribut latar belakang

dan gunakan div untuk kecerunan warna latar belakang. background-webkit-linear-gradient

5 Tulis

<!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>

Salin selepas log masuk

di dalam

dan tetapkan kecerunan untuk bermula dari atas dan berakhir di bawah. Jika anda menulis -webkit-linear-gradient, jangan tulis top. topbottom

6. Tetapkan susunan kecerunan warna.

<!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>

Salin selepas log masuk

Rendering adalah seperti berikut:

<!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>

Salin selepas log masuk

Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci) Pembelajaran yang disyorkan:

Tutorial video CSS

Atas ialah kandungan terperinci Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!