年度实用技巧 | box-shadow的多重用法

背景

我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上篇习题解析

上一篇结尾留了一个小习题，我们先来看一下，图形内陷的效果是如何实现的。

习题中按钮内陷的效果，其实是通过设置box-shadow的内阴影实现的。将内阴影的颜色设置的比按钮背景颜色深一些，就好像按钮被按下了一样。

知识点讲解

阴影效果

除了常见的容器阴影效果，我在网上也看到过很多有趣效果，今天跟大家分享一下，究竟哪些效果是可以用box-shadow实现的。

知识点

以下知识内容来自于菜鸟教程

讲解代码

讲解代码操作步骤

演示代码都可通过代码复制拷贝到本地的IDE中进行演示。也可以自己照着敲击学习。 第一步：选中一个想查看代码的功能项； 第二步：将查看的功能的代码进行复制； 第三步：将代码粘贴到一个空档html文档中； 第四步：右键操作这个新建的 html 文档，选择在浏览器中打开，刚才的功能就在页面中出来啦。

一个小习题

有一个很经典的布局，叫栅格化布局。以下是antd官网对栅格化布局的介绍

栅格化布局会将容器24等分，划分之后的信息区块称之为『盒子』。

横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

如何实现栅格化布局？解答方案会在下篇文章中给出。

总结

其实最早我用box-shadow也仅仅是为容器加一下阴影。后来用的多了，开始逐渐挖掘出它的奇妙用法，感觉它就是小巧强大的代名词。

有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

前端的千变万化，源于对前端知识的融会贯通。