盒模型阴影
box-shadow: [inset] x y blur [spread] color
参数
- inset: 投影方式
》inset：内投影
》不给：外投影
- x、y：阴影偏移
- blur：模糊半径
- spread：扩展阴影半径
》先扩展原有形状，再开始画阴影（先执行spread，再执行blur）
- color
其他盒模型新增属性
box-reflect 倒影（只有webkit内核浏览器支持）
direction 方向 above | below | left | right
距离（可选）
渐变（可选）
resize 自由缩放
both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放
注意：一定要配合overflow: auto 一块使用只有水平方向可以缩放
img{ display: block;margin: 200px auto; -webkit-box-reflect: right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%); }
box-sizing 盒模型解析模式
content-box 标准盒模型
width/height = border + padding + content
border-box 怪异盒模型 width/height = content