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>
