*scroll-behavior: smooth; 凡是需要滚动的地方都加上这个,平稳的滚动
*.background-attachment 可实现图片滚动视差
*. position：sticky;
粘性定位。 元素在屏幕显示区域内时 表示为relative， 当快要滚出显示屏的区域时，表示为fixed。
适合那种随着 屏幕滚动 固定在上方或者下方的导航条。
属性必须指定top bottom left right 任一才能使用。
饿了么官网的移动端导航条就是用的 sticky。
* css 图片裁切 object-fit:cover (只保留图片中间的部分,多余的隐藏)
*. calc（）属性：用于动态计算长度单位。需要注意的是运算符前后都需要保留一个空格，
例如：width：calc（100％ - 100px）;
*. rgba（0,0,0,0.4）;（r：红色值g：绿色值b：蓝色值a：透明度）不会影响子元素;
*. 单行文本超出显示省略号（文本溢出问题）
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
溢出：隐藏;
空白：NOWRAP;
文本溢出：省略号;
好看的蓝色渐变 - background-image: linear-gradient(180deg, #0088cc, #01cfff);
* 插图裁剪效果(可用transition效果)
clip-path: inset(2rem);