1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div id="div1"></div> 10 <div id="div2"></div> 11 </body> 12 </html>
1 div{ 2 width: 300px; 3 height: 200px; 4 border:solid; 5 } 6 #div1{ 7 /*background-image: linear-gradient(red,blue);*//*默认从上到下*/ 8 /*background-image: linear-gradient(0deg,red,blue);*//*0deg从下到上*/ 9 /*background-image: linear-gradient(to right,red,blue);*/ 10 /*background-image: linear-gradient(to left,red,blue);*/ 11 /*background-image: linear-gradient(to right bottom,red,blue);*/ 12 /*background-image: linear-gradient(to right,red,green,blue);*/ 13 /*background-image: linear-gradient(to right top,red 25%,green 50%,orange 75%,blue 100%);*/ 14 /*background-image: linear-gradient(to right top,red 0px,green 100px,orange 200px,blue 300px);*/ 15 background-image: repeating-linear-gradient(to right top,red 0px,green 10px,orange 20px,blue 30px);/*30px之后开始重复渐变设置*/ 16 } 17 #div2{ 18 /*background-image: radial-gradient(red,blue);*//*默认从里到外*/ 19 /*background-image: radial-gradient(circle,red,green,blue);*//*默认ellipse椭圆，可设circle圆*/ 20 /*background-image: radial-gradient(circle at right,red,green,blue);*/ 21 /*background-image: radial-gradient(circle at left bottom,red,green,blue);*/ 22 /*background-image: radial-gradient(circle 50px,red,green,blue);*//*50px为半径*/ 23 /*background-image: radial-gradient(circle farthest-corner,red,green,blue);*//*半径除了可以像素如50px，还可用关键字closest-side圆心到距离最近的边、farthest-side圆心到距离最远的边、closest-corner圆心到距离最近的角、farthest-corner圆心到距离最远的角*/ 24 background-image: repeating-radial-gradient(circle closest-side,red,green,blue); 25 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <input type="button" value="渐变按钮" class="b1"> 10 <input type="button" value="渐变按钮" class="b1 b2"> 11 <input type="button" value="渐变按钮" class="b1 b2 b3"> 12 </body> 13 </html>
1 .b1{ 2 padding: 5px 10px; 3 font-size: 15px; 4 text-shadow: 3px 3px 3px rgba(0,0,0,0.6); 5 background-image: linear-gradient(to left bottom,pink,green); 6 } 7 .b2{ 8 border-radius: 10px; 9 } 10 .b3{ 11 border-radius: 1em; 12 } 13 .b1:hover{ 14 background-image: linear-gradient(to right top,pink,green); 15 }