标签：gradient border logs gre nbsp sid color htm css
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 }
标签：gradient border logs gre nbsp sid color htm css
原文地址：http://www.cnblogs.com/xiongjiawei/p/6789043.html
