box-sizing:
3个值：content-box(默认），border-box ，padding-box
- content-box：border和padding不计算入width之内
- border-box ：border和padding计算入width之内（怪异模式）
- padding-box：padding计算入width之内
box-shadow:
普通设置：
box-shadow:10px 10px 5px #888888;
实例一.jpg
设置多个边阴影：
box-shadow:h-shadow v-shadow blur spread color inset;
例子
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
实例2.jpg
object-position/object-fit
object-fit
5个值：
- fill:填充，替换内容拉伸填满整个content box，不保证保持比例
- contain：包含，保持原比例，保证替换内容一定可以在容器里放下，因此可能会有留白
- cover：覆盖，保持原比例，宽度和高度至少有一个与容器一致，因此会有部分区域不见
- none：保持原比例，原尺寸
- scale-down：降低，当容器尺寸小于替换内容尺寸时，表现与contain一致，当容器尺寸大于替换内容尺寸时，表现与none一致
object-position
默认是50% 50%居中效果
100% 100%是右下角
calc(100%-20px) calc(100%-10px)是右下角偏20,10位置
calc()设定动态值
calc(50%+2px)
vh
相对于视口的高度，视口被均分为100vh
vw
相对于视口的宽度，视口被均分为100单位的vw
