第五十九章 阴影

每一天辛苦的写作，给年幼的小老鼠留下了深深的阴影，唯有扫描下面二维码，给他一杯热乎乎的咖啡，才能扫除他心中的阴霾……

咳咳，好像走错片场了，不过别放下你刚刚举起的手机啊，扫码，来来来，都扫一下哦~

这一章我们来说说盒子的阴影。嗯，盒子的阴影（box-shadow），和文字的阴影（text-shadow）不同，其实设置起来差不多。

参数如下：

• 仅盒元素可以有 inset 表示内阴影，不写则默认为外阴影；
• 前两个数值，分别是横向偏移量和纵向偏移量，可以取负值；
• 第三个数值（可以省略），模糊程度（半径）；
• 第四个数值（可以省略，文字阴影不支持），扩散的半径；
• 颜色

说的很热闹，写一下就知道了：

<div class="box-shadow">里面还有一些文字</div>

.box-shadow {border: 3px solid orange;padding: 10px;box-shadow: 10px 10px 12px 5px rgba(0, 0, 0, 0.3);text-shadow: -10px -10px 5px red;}

里面还有一些文字

你们可以自己写一下，然后单独修改其中的某一个值，观察变化。然后说点高级的玩法，我们可以使用逗号分隔，写多层阴影：

<div class="box-shadow">里面还有一些文字</div>

.box-shadow {border: 3px solid orange;padding: 10px;box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.3), 40px 0 12px rgba(255, 0, 0, 0.3);text-shadow: -10px -10px 5px red, -10px 10px 12px green;}

里面还有一些文字

然后就可以发挥你的想象力了。比如不加模糊，当作边框使用什么的……

这个属性很简单，但是想调出一个看起来优雅舒适的参数还是挺难的，一个不小心就会像上面一样，显得特别的杀马特。