css3新属性笔记（1）

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