【CSS3】渐变 

 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 }

 

posted @ 2017-04-30 11:00  xiongjiawei  阅读(199)  评论(0)    收藏  举报