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;