炫酷渐变实例 

 1 炫酷的线性渐变实例
 2 <!DOCTYPE html>
 3 <html>
 4 <head lang="en">
 5     <meta charset="UTF-8">
 6     <title>径向渐变</title>
 7     <style type="text/css">
 8         div{
 9           width: 800px;
10           height: 600px;
11           margin: auto auto;
12           background: #0ff;
13           /* 这句最重要，设置背景图片的宽高，整个div有n个宽高为100px的背景图片组成
14              然后再使用渐变设置每个背景图片的渐变颜色即可
15            */
16           background-size: 100px 100px;
17           /* 以Y轴正半轴为0deg顺时针旋转度数变大，
18           以宽高为100px的正方形为单位设置每个正方形的渐变色
19           1，从45度角开始，即左下角到右上角：0-25%设置纯blue，25%-25%blue渐变到透明,即一条蓝线。25%-100%设置为透明背景。
20              从45度角开始，25%-75%设置透明背景，75%-75%为透明渐变为纯blue，即一条蓝线。75%-100% 为纯蓝色。
21           2，同理角度换成-45角度同上继续设置渐变即可出现炫酷效果 注意浏览器的兼容性*/
22       background-image: -webkit-linear-gradient(45deg,blue 25%,transparent 25%),
23                 -webkit-linear-gradient(45deg,transparent 75%,blue 75%),
24                 -webkit-linear-gradient(-45deg,blue 25%,transparent 25%),
25                 -webkit-linear-gradient(-45deg,transparent 75%,blue 75%);
26 
27       background-image:    -moz-linear-gradient(45deg,blue 25%,transparent 25%),
28                    -moz-linear-gradient(45deg,transparent 75%,blue 75%),
29                    -moz-linear-gradient(-45deg,blue 25%,transparent 25%),
30                    -moz-linear-gradient(-45deg,transparent 75%,blue 75%);
31 
32       background-image:      -o-linear-gradient(45deg,blue 25%,transparent 25%),
33                    -o-linear-gradient(45deg,transparent 75%,blue 75%),
34                    -o-linear-gradient(-45deg,blue 25%,transparent 25%),
35                    -o-linear-gradient(-45deg,transparent 75%,blue 75%);
36                    
37       background-image:         linear-gradient(45deg,blue 25%,transparent 25%),
38                       linear-gradient(45deg,transparent 75%,blue 75%),
39                       linear-gradient(-45deg,blue 25%,transparent 25%),
40                       linear-gradient(-45deg,transparent 75%,blue 75%);
41         }
42 
43     </style>
44 </head>
45 <body>
46     <div></div>  
47 </body>
48 </html>

 



posted @ 2019-04-22 15:46  最好的安排  阅读(398)  评论(0)    收藏  举报

Knowledge is infinite