1
![72G(M${75V345GA%Z%M@]9E_tmb.png](p3-juejin.byteimg.com/tos-cn-i-k3…?)
background-size
opacity 透明度
针对浏览器兼容的两张思路
优雅降级 拿到页面久开始做完整的功能 在针对低版本浏览器做兼容
渐进增强 一开始就构建基本功能 在针对高版本浏览器做优化处理
宽高
background-size
opacity 透明度
针对浏览器兼容的两张思路
优雅降级 拿到页面久开始做完整的功能 在针对低版本浏览器做兼容
渐进增强 一开始就构建基本功能 在针对高版本浏览器做优化处理
background-size auto 100% 宽度100% 高度自适应
background-size 100% auto 高度100% 高度自适应
background-size contain 完整的显示图片 不变形也不裁切
background-size cover 等比缩放整个盒子 图片会被裁切
过度动画 ：必须是一个数值到另一个数值
过度时间
延迟时间
速度曲线 ----贝塞尔曲线
过度属性
transition all 1s ease
渐变
background: linear-gradient(red, blue, orange);线性渐变
background: linear-gradient(90deg,red,blue); 角度渐变
background: linear-gradient(red 0%,blue 30%,green 70%);无过度渐变
background: repeating-linear-gradient(red 10%, yellow 20%);重复性渐变
background: radial-gradient(red, blue, black );圆形渐变
background: radial-gradient(circle,red, blue, black );圆形渐变
缩放
transform: rotate(360deg);顺势旋转 z轴旋转
transform: rotateX(50deg); x轴旋转
transform: skew(40deg); 倾斜 只有xy轴
transform: scale(2,.2);缩放 xyz轴都有
transform-origin:100% 0 ; 旋转点的位置
字体不能在小的时候可以使用缩小
旋转和位移同时使用的时候 有先后顺序的问题
旋转会改变坐标轴的方向
如果旋转90° 则左右移动变成上下移动
分别代表3列 间距 边框
