8.1.6 弹性盒模型(2)
盒模型阴影
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