阴影盒子和REM

属性值规则
当给出两个、三个或四个 <length> 值时。
如果只给出两个值, 那么这两个值将会被当作水平阴影、垂直阴影来解释。
如果给出了第三个值，那么第三个值将会被当作模糊距离解释。
如果给出了第四个值, 那么第四个值将会被当作阴影尺寸来解释。
可选，inset关键字。
可选，颜色值。

 

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

rem的定义：
rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。
eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。

设计稿宽度：400px    移动设备：400px

首先，通过设计稿宽度，设置html的 font-size的值为 移动设备 / 设计稿宽度 * x = x px（x可为任意值，下方实例中使用为10，即 1rem = 10px）。当相同的代码运行在屏幕为小于400px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x，整体比例不变，以此达到移动适配的效果
402