文字阴影

p{
    text-shadow: 20px 27px 22px pink;
    /*水平位移 垂直位移 模糊程度 阴影颜色*/
}

设置多个阴影实现凹凸效果

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;/*凹*/
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;/*凸*/

盒子大小

box-sizing: content-box;

此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化

box-sizing: border-box;

此时设置的width和height是盒子的总宽高。盒子的实际宽度=设置的width。此时改变padding和border的大小，会改变内容的宽高，盒子的总宽高不变。

边框

用的时候自己搜

边框圆角：border-radius

边框阴影：box-shadow

动效

过渡transition

    transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
    transition: all 3s linear 0s;

2D转换transform

transform: scale(2, 0.5);
//水平方向*2 垂直方向*0.5

transform: translate(50%, -50%);
//水平方向向右移动自己宽度的一半 垂直方向向上移动一半

transform: rotate(45deg);
//顺时针旋转45°（负值逆时针）

3D 转换

知道有哪些就行 用的时候查

1、旋转：rotateX、rotateY、rotateZ

2、移动：translateX、translateY、translateZ

3、透视：perspective

4、3D呈现（transform-style）

动画

1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。