渐变效果

标签：组合   col   new   两种   bsp   好的   enter   椭圆   dia   

1. 线性渐变：

   linear-gradient(方向或角度,第一中颜色,第二种颜色,……);

　　　　　　方向： top、left、right、tottom，并在使用是前面添加 to；

　　　　　　　如： linear-gradient(to left,red,yellow);

　　　　　　　　　　　linear-gradient(to left bottom,red,yellow);

　　　　　　角度： 0-360单位deg，0deg对应top、90deg对应right、180deg对应bottom、360deg对应left；

　　　　　　　　如：　linear-gradient(45deg,red,yellow);

1. 径向渐变：从元素的中心向四周放射性渐变

   radial-gradient([形状 大小 at 位置],颜色值,颜色,……);

            形状：circle（圆形）、ellipse（椭圆形，默认值）；

　　　　　　　　如：　radial-gradient(circle, red, yellow);

　　　　　　大小：可以使用百分比（如：50%）或长度（如：50px）；

　　　　　　　　如： radial-gradient(45px, red, yellow);

　　　　　　　　　　以下代码为：横向渐变直径为45px，纵向渐变直径为20px；

　　　　　　　　　　radial-gradient(45px  20px, red, yellow); 

　　　　　　位置：center(默认值)、 top、left、right、tottom，前面添加 at ；

　　　　　　　　如：radial-gradient(at top, red, yellow);

　　　　　　　　　　 radial-gradient(at top left, red, yellow);

以上两种渐变颜色列表：

• 两个或多个颜色的组合，使用逗号分隔；
• 可以使用：关键字（如：red）、十六进制（#ffffff）、rgb、rgba、hsl、hsla

如果那里写的不对，或者不够好的请指出。谢谢

渐变效果

标签：组合   col   new   两种   bsp   好的   enter   椭圆   dia   

原文地址：http://www.cnblogs.com/warmest/p/7872527.html