第22章 CSS3渐变效果-CSDN博客

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3渐变效果</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>我是HTML5</div>

</body>
</html>

style.css

@charset "utf-8";

div {
	width: 500px;
	height: 200px;

	/*background-color: green;*/
	/*background-image: linear-gradient(orange, green);*/
	/*background-image: linear-gradient(to bottom right, orange, green);*/

	/*background-image: linear-gradient(-45deg, orange, green);*/

	/*background-image: linear-gradient(-45deg, orange 0%, green 20%, blue, red 100%);*/
	/*background-image: linear-gradient(-45deg, orange 10px, green 40px, blue, red 500px);*/

	/*background-color: red;
	background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));*/

	/*background-image: repeating-linear-gradient(orange 10px, green 30px);*/

	/*background-color: green;*/

	/*background-image: -webkit-linear-gradient(orange, green);	webkit引擎还没有剔除前缀*/
	/*background-image: -moz-linear-gradient(orange, green);		firefox也没有剔除前缀*/
	/*background-image: -o-linear-gradient(orange, green);		Opera新版本不支持-o-，支持-webkit*/
	/*background-image: linear-gradient(orange, green);*/

	/*background-image: radial-gradient(orange, green);*/
	/*background-image: radial-gradient(circle, orange, green);*/
	/*background-image: radial-gradient(circle at top, orange, green);*/
	/*background-image: radial-gradient(circle at top right, orange, green);*/

	/*background-image: radial-gradient(circle closest-side, orange, green);*/
	/*background-image: radial-gradient(circle closest-corner, orange, green);*/

	/*background-image: radial-gradient(circle 50px, orange, green);*/

	background-image: repeating-radial-gradient(circle 50px, orange, green);
}