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

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

这一章我们来说说盒子的阴影。嗯,盒子的阴影(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;
}
里面还有一些文字

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

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

【本章助记卡片:卡片 for 第五十九章