知识总结
前提:很多css3属性 最初的预览版没有形成最终的正式版,但是浏览器为了对这些新属性形成支持,主流浏览器提供属于自己的语法规则“浏览器前缀”
-webkit- 谷歌、苹果浏览器前缀
-moz- 火狐浏览器前缀
-ms- IE浏览器前缀
-o- 欧鹏浏览器前缀
注:兼容模式必须添加浏览器前缀,标准模式不添加浏览器前缀。
一、渐变
1:线性渐变
线性渐变:从一个方向到另一个方向的颜色变化。
标准模式的语法(不添加浏览器前缀):
Background:linear-gradient(direction,color-stop1,color-stop2,。。。)
说明:direction:默认为to bottom,即从上向下渐变。
Stop:颜色的分布位置,默认均匀分布,例如有三个颜色,各个颜色是stop均为33.33%。
兼容模式语法(添加浏览器前缀):
Background:-webkit-linear-gradient(direction,color-stop1,color-stop2,。。。);
说明:direction:不能添加to 默认指的是从哪个方向开始。
渐变方向:
1:to left\to right\to top
2:对角渐变
To left top\to right bottom
3:渐变线角度的变化
例如:标准模式:40deg 40度
兼容模式:90-40
线性渐变:颜色的分布:
Linear-gradient(方向,颜色1 20%,颜色2 30%,颜色3)
到20%这个位置仍然是颜色1,出了20%开始向颜色2渐变。
2:径向渐变
径向渐变:从一个点到四周的颜色的过滤变化。
语法(必须添加浏览器前缀):
Background:-webkit-radisl-grdaient(center,shape,size,start-color,… last-color);
说明:
Center:渐变起点的位置,可以为百分比,默认的是图形的正中心。
Shape:渐变的形状,ellipse表示为椭圆,circle表示为圆形,一般默认值是椭圆ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样
Size:渐变的大小,即渐变到哪里停止,它有四个值。Closest-side 最近边;farthest-side
最远边;closest-Corner最近角;farthest-Corner 最远角。
3:重复性渐变
重复性线性渐变
Background:repeating-linear-gradient();
重复性径向渐变
Background:repeating-radial-gradient();
二、过渡
1:transition-property:检索或设置对象中的参与过渡的属性。
2:transition-duration:检索或设置对象过渡的持续时间。
3:transition-delay:检索或设置对象延迟过渡的时间。
4:transition-timing-function:检索或设置对象中过渡的动画类型。
注:动画的运动类型:默认的不是匀速,默认的是ease。
简写属性:
Transition:过渡的属性(all) 过渡的时间 延迟的时间 动画类型(linear 匀速)
Transition必须通过事件触发!(鼠标滑过)改变css属性的值。