2020.0403渐变知识总结

知识总结

前提：很多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属性的值。