脱发第n天

1.background-image 渐变   线性渐变 background-image：linear-gradient（渐变角度，颜色1 颜色1位置，颜色2 颜色2位置，......）

渐变角度：1、单位deg 30度 30deg

2、可以用英文单词来表示渐变方向  to right 从左向右线性渐变

径向渐变  background-image：radial-gradient（shape at position,颜色1 颜色1位置，颜色2 颜色2位置，......）

1、shape 形状：      ellipse 默认 椭圆

                            circle  圆形

  2、size 渐变大小  farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角

farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边

closet-side  指定径向渐变的半径长度为从圆心到离圆心最近的边

closet-corner  指定径向渐变的半径长度为从圆心到离圆心最近的角

position 圆心位置     at x y

x y 取值   英文单词 left right  center top bottom 

                数值+单位

                 百分比

圆角  border-radius：值； 四个圆角一样

         border-radius：值1 值2； 值1是左上角、右下角

                                                   值2是左下角、右上角                      

border-radius：值1 值2 值3； 值1是左上角  值2是右上角、左下角  值3是右下角

border-radius：值1 值2 值3 值4； 值1是左上角  值2是右上角  值3是右下角  值4是左下角 

float  浮动    none 默认 不浮动

                     left      左浮动

                     right   右浮动

position  定位    static  默认 正常文档流

                           relative  相对定位   相对于自己原来的位置，不会因为移动导致原来的位置不变

                           absoulute  绝对定位     包含框无定位   相对于浏览器定位

                                                                 包含框有定位   相对于离自己很近的父元素定位

                            fixed  固定定位

                            sticky  粘性定位     

过渡 transition                transition-property 过渡属性      多个属性之间用逗号隔开或用all表示

                                    transition-duration  过渡持续时间 单位：m秒或  ms秒   

 transition-timing-function   过渡速度        ease 默认 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

cubic-bezier(x1,y1,x2,y2)

transition-delay 过渡延迟时间       

                                                        重绘与回流的区别

1.重绘

就是元素样式的改变（大小、宽度、高度、位置）不变

如：outline、visibility、color、background-color等

只改变自身样式，不会影响到其他元素。通俗是指只改变网页的装饰衣服，不改变格局骨骼。

2.回流

 回流：元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染 如添加或删除可见的DOM元素；元素的位置发生变化；元素的尺寸发生变化、内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；页面一开始渲染的时候（无法避免）；因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流

通俗的说对网页进行洗筋换骨。

注意：回流一定会触发重绘，而重绘不一定会回流。