css3的渐变属性

css3的渐变

CSS3渐变
【由浏览器生成进行渲染的】
1.线性渐变：
background:-webkit-linear-gradient(方向,颜色1,颜色2,颜色3，……);
单一方向渐变：
left right top bottom【从 那边 开始】
注意：需要添加兼容前缀
to left【到 那边 结束】
to right
to top
to bottom
注意：不要添加兼容前缀
通常两种方式都写上 兼容谷歌火狐 和 不兼容
2.对角渐变：
left top 从左上角开始
right bottom 从右下角开始
……以此类推
注意：带兼容前缀
to left top 到左上角结束
to right bottom 到右下角结束
……以此类推
注意：不带兼容前缀
3.角度渐变
取值【-360deg到360deg】
正值逆时针旋转 负值顺时针 写在"方向"位置
4.指定颜色分布的百分比，让颜色按百分比进行渐变
默认颜色趋于均分
[color] 10% 从这个颜色的10%之后开始渐变
(left,blue 10%,yellow 60%,green)
从%多少开始渐变 到下一个颜色的%多少渐变结束再开始下一个渐变颜色
[color] 100px 从这个颜色的100px之后开始渐变
5.径向渐变(一定要加浏览器前缀)
【从一个点 到四周的渐变】
background:-webkit-radial-gradient(渐变位置,大小,形状,颜色1,颜色2,颜色3);
渐变位置：默认从中心到四周
left 从左边到四周的渐变
right
top
bottom
left top 从左上角到四周的渐变
right bottom
……以此类推
10px 30px,颜色，颜色 从左10px上30px到四周的渐变
……以此类推
渐变形状：
默认椭圆 ellipse【元素是正方形 则是正圆】
正圆 circle
大小：
【渐变的大小 即渐变到哪里停止】
closest-side最近边
farthest-side最远边
closest-corner最近角
farthest-corner最远角
渐变重复【后面的值要比前面的值大】
线性渐变：
background:repeating-linear-gradient(left,#000 10%,#fff 20%);
径向渐变：
background:repeating-radial-gradient(left,#000 10%,#fff 20%);
补充：
渐变用的背景属性是 background-image: ；