css3 浏览器前缀 线型渐变 过渡属性

css3：没有形成正式版

每个浏览器商，为了能对css3属性形成一个更好的支持，浏览器形成自己一套语法规范，一些css属性，如果想在浏览器上形成支持，有时候需要添加浏览器前缀

谷歌前缀：—webkit—

Eg：—webkit—属性：属性值

火锅前缀：—moz—

Eg：—moz—属性：属性值

IE前缀：—ms—

Eg：—ms—属性：属性值

欧朋前缀：—O—

Eg：—O—属性：属性值

Css3渐变：

从一个颜色到另一个颜色平稳过度（颜色逐渐的变化）

线性渐变：

background：linear-gradient（direction.color-stop1.color-stop2...）

（渐变的方向，颜色值，颜色值。。。）

渐变的方向：

to left

to right

to bottom

to top

to right top

to left bottom

to right bottom

to left top

不添加浏览器前缀-》标准模式

添加浏览器前缀-》兼容模式

前缀加在功能函数前面

注：如果linear-gradintt（）添加浏览器前缀，方向是不加to的，指的是从哪个方向开始

方向可以使用角度的变化：deg（度数）

例如：

标准模式background：linear-gradient（30deg red blue）

兼容模式 background：—webkit—linear-gradient（60deg red blue）

渐变色，颜色的分布可以用百分比控制

Eg：background：linear-gradient（to left red10% blue 30%）；

说明：到10%的位置都是红色 出来10%的位置开始向蓝色渐变，直到渐变到30%的位置是蓝色

径向渐变：

从一个点向四周渐变

语法：必须添加浏览器前缀

background：radial-gradient（center，shape，size，stare-color，last-color）

说明：radial-gradient（渐变原点的位置，形状（椭圆或正圆），大小，颜色值1，颜色值2）

渐变原点位置：

50% 50% = center

10px 30px = 距离左侧10px 顶端30px

形状：

默认是椭圆

circle 正圆

大小：

渐变的大小：径向渐变的大小，从圆心点到规定渐变位置（最近边 最近角 最远角 最远边 ）进行颜色渐变

默认值是最远角 中心点向最远角渐变

closest-side 最近边

farthest-side 最远角

closest-comer 最近角

farthest-coner 最远角

重复性线性渐变：

background：—webkit—repeating-linear-gradient（right，red，yellow）

重复性径向渐变：

repeating改成radial就行了

过渡：transition-property

duration

deley

toming-funtion

Transition：属性值1，属性值2，属性值3

属性值1：过渡的属性（width，height，。。）默认是all

属性值2：过渡的事件单位为S（秒）ms（毫秒）1S = 1000ms

属性值3：过渡属性的延迟时间

属性值4：过渡动画的类型 匀速（linear）

transition放在初始状态上面，保证鼠标滑过和离开有过渡效果

transition：all  3S  2S；

延迟

注：transition必须通过事件（鼠标滑过）触发

2，如果一个元素，单独设置每个属性的过渡transition：width 1S，height 2S ，background 5S；