炫酷线性渐变
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>径向渐变</title>
<style type="text/css">
div{
width: 800px;
height: 600px;
margin: auto auto;
background: #0ff;
background-size: 100px 100px;
background-image: -webkit-linear-gradient(45deg,blue 25%,transparent 25%),
-webkit-linear-gradient(45deg,transparent 75%,blue 75%),
-webkit-linear-gradient(-45deg,blue 25%,transparent 25%),
-webkit-linear-gradient(-45deg,transparent 75%,blue 75%);
background-image: -moz-linear-gradient(45deg,blue 25%,transparent 25%),
-moz-linear-gradient(45deg,transparent 75%,blue 75%),
-moz-linear-gradient(-45deg,blue 25%,transparent 25%),
-moz-linear-gradient(-45deg,transparent 75%,blue 75%);
background-image: -o-linear-gradient(45deg,blue 25%,transparent 25%),
-o-linear-gradient(45deg,transparent 75%,blue 75%),
-o-linear-gradient(-45deg,blue 25%,transparent 25%),
-o-linear-gradient(-45deg,transparent 75%,blue 75%);
background-image: linear-gradient(45deg,blue 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,blue 75%),
linear-gradient(-45deg,blue 25%,transparent 25%),
linear-gradient(-45deg,transparent 75%,blue 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10750566.html