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

推荐阅读更多精彩内容