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元素;元素的位置发生变化;元素的尺寸发生变化、内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替);页面一开始渲染的时候(无法避免);因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流
通俗的说对网页进行洗筋换骨。
注意:回流一定会触发重绘,而重绘不一定会回流。