第五十九章 阴影

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

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

这一章我们来说说盒子的阴影。嗯,盒子的阴影(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;}

里面还有一些文字

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

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

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第五十九章 阴影

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏