Box-Shadow小用法

box-shadow 常规用法

基础语法

box-shadow 属性向边框添加一个或多个阴影;

box-shadow: (inset) x-offset, y-offset, blur, spread color;

模拟多边框

div{
  width: 100px;
  height: 100px;
  margin: 100px;
  border:5px solid ;
  box-shadow: inset 0 0 0 5px #ccc,
    0 0 0 5px #333;
}
`</pre>

要注意: box-shadow 毕竟不是实际边框, 不占据实际空间, 也不属于 `box-sizing`范围

### 模拟半透明遮罩层

<pre>`#foo{
  width:200px;
  height:200px;
  background:#FFF;
  box-shadow:0 0 0 1920px rgba(0,0,0,.5);
}
`</pre>

### 多重 box-shadow 绘制简图案

<pre>`&lt;div class="bg"&gt;
  &lt;div class="cloud"&gt;&lt;/div&gt;
&lt;/div&gt;

.bg{
  width: 100%;
  height: 100px;
  padding: 10px;
  background-color: #00bcd4;
}
.cloud{
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background-color: #FFF;
  border-radius:50%;
  box-shadow:80px 10px 0 10px #FFF,
    50px 0 0 20px #FFF, 10px -10px #FFF, -10px 10px 0 10px #FFF;
}
`</pre>

### 多重 shadow 实现立体感

<pre>`&lt;div&gt;Solid&lt;/div&gt;

div{
  width: 200px;
  line-height: 68px;
  font-size: 48px;
  text-align: center;
  color:rgba(0,0,0,.3);
  text-shadow: 1px 1px 0 rgba(0,0,0,.55),
    2px 1.5px 0 rgba(0,0,0,.25),
    3px 2px 0 rgba(0,0,0,.2),
    4px 2.5px 0 rgba(0,0,0,.15),
    5px 3px 0 rgba(0,0,0,.1);
}