标签:过渡 round color 51cto lin rgba 分布 process tom
css3渐变
线性渐变 (默认从上向下)
1、background: linear-gradient(red, blue); 基本的渐变,默认从上向下
2、background: linear-gradient(to right, red , blue); 从左向右的渐变
3、background: linear-gradient(to bottom right, red , blue);从左上角到右下角/
4、background: linear-gradient(180deg, red, blue);带有指定角度的渐变
5、background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色渐变,
transparent透明色/
重复的线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变
1、background: radial-gradient(red, green, blue);颜色结点均匀分布的径向渐变:
2、 background: radial-gradient(red 5%, green 15%, blue 60%); 颜色节点分布不均匀
3、 background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复的径向渐变
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
形状为圆形的径向渐变:
background: radial-gradient(circle, red, yellow, green);
css3中transform可以实现文字或图像的旋转(rotate)、缩放(scale)、倾斜(skew)、移动(translate)的变形效果。
?旋转、缩放、倾斜和移动,这四种变形效果进行结合使用,并且使用的先后顺序不同,页面显示的结果会有区别。
使用语法:
transform:功能;
-ms-transform:功能; / IE 9 /
-moz-transform:功能; / Firefox /
-webkit-transform:功能; / Safari 和 Chrome /
-o-transform:功能; / Opera /
标签:过渡 round color 51cto lin rgba 分布 process tom
原文地址:http://blog.51cto.com/13570197/2319580