盒模型阴影
2016-03-30 阅读 381
```css
box-shadow:[inset] x y blur [spread] color
```
参数
> inset 投影方式
> inset：内投影
> 不给：外投影
> x、y：阴影偏移
> blur：模糊半径
> spread：扩展阴影半径
> 先扩展原有形状，再开始画阴影color
例如：
```css
box-shadow:10px 10px 30px blue;
box-shadow:inset 10px 10px 30px blue;
box-shadow:0 0 30px 10px #000;
box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;
```
### 其他盒模型新增属性
#### box-reflect倒影
> direction 方向必选 above|below|left|right;
> 距离
> 渐变（可选）
```css
img{ -webkit-box-reflect:below;}//上下排列，倒影在下方
img{ -webkit-box-reflect:right 10px;}//左右排列，倒影在右方
img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//线性渐变，逐渐消失
background:-webkit-linear-gradient(red 0,blue 100%);//背景渐变
```
#### resize 自由缩放
> both 水平垂直都可以缩放
> horizontal 只有水平方向可以缩放
> vertical 只有垂直方向可以缩放
```css
.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}
```
`注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放`
#### box-sizing 盒模型解析模式
> content-box 标准盒模型 width/height=border+padding+content
> border-box 怪异盒模型 width/height=content
```css
.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}
```
更新于 2023年03月28日
