🎄前言
愉快的周末又要结束了，又要迎来新的打工日，小包心中有一丝悲伤。(那是绝对不可能啊，小包爱工作，老板看到希望能给加点工资)
不管未来的路会有多苦多难，饭的质量一定要跟上，特别是早饭，重要的不得了啊！于是小包为了大家的身心健康考虑，亲自下厨，使用 CSS 中的 :before/:after、box-shadow 内外阴影、线性渐变与径向渐变等顶级原材料，采用最顶级的烹饪工艺，为大家带来上流早餐面条一份。
学习本文，你会学会:
:before/:after伪类元素的使用- 巩固
box-shadow的使用 - 线性渐变和径向渐变的学习
通过封面我们可以看到这碗丰盛的早餐面共有餐具、煎蛋、面条、葱花、火腿五部分组成，下面咱们来一起看看小包是如何烹饪的。
🍴 餐具
餐具有三种，分别是碗、筷子、小勺子。
筷子有两根，小勺子由勺柄和勺心两部分组成。根据我们编码的习惯，这种密切相关的两部分无需建立多个 div 元素，可使用 :before/:after 伪类元素实现。
上面将筷子和小勺子的实现分为两部分，初步构建好筷子和勺子，下面增加立体感，美化一下。box-shadow 提供内阴影和外阴影，配合起来可以很好的增加图形的立体感。
下面以小勺子为例，讲解一下上面思路的具体实现:
- 实现勺柄
width: 15px; height: 150px; background: #963; /* 增加圆角，使勺柄更加生动 */ border-radius: 5px; 复制代码
- 实现勺心部分
width: 70px; height: 80px; /* 现实中饭勺形状大多都是椭圆 */ border-radius: 50%/60% 60% 40% 40%; /* 第一个背景为椭圆的阴影效果，增加立体感 */ background-image: radial-gradient( ellipse at center 70%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0) 40% ), linear-gradient(to top, #aa7744, #bb8855); 复制代码
经过上面两步，就可以得到勺子的最初形态——平面勺子。
- 添加内外阴影
在具体设置阴影之前，先补充一点阴影方面的知识:
inset阴影水平方向设置为0，垂直方向设置为负值，那么阴影会从底部往上蔓延。- 如果设置多个阴影，先设置的阴影权重高，当阴影发生重合时，权重高的阴影会覆盖权重低阴影
/* 勺柄 */ box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%), inset 0 -5px 2px 0 rgb(0 0 0 / 10%); /* 勺心 */ box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 10%), -1px 0 2px 0 rgb(0 0 0 / 10%), inset 0 -5px 1px 1px rgb(0 0 0 / 5%), inset 0 -5px 8px 1px rgb(0 0 0 / 10%) 复制代码
关于
box-shadow: inset的具体可以参考 :【缅怀钱老先生】实现炫酷的火箭发射效果
添加阴影后，小勺子是不是很可爱?
碗与筷子的实现与小勺子类似，都是借助了内外阴影加背景色的效果，餐具最终效果图:
餐具都已经具备了，那么剩下来要干啥那？干饭干饭，最强干饭人来袭。
🍜 面条
小包看完面条的实现方式，不由被创意者的绝妙创意震撼到，真的是精彩绝伦，简单的属性大大的用处。
CSS 中提供两种类型渐变: 线性渐变、径向渐变。
径向渐变 radial-gradient 由它的中心定义，语法比较复杂，举个例子来描述语法:
radial-gradient(circle at center, red 0, blue, green 100%) 复制代码
: 渐变形状，圆形和椭圆形，例子中的circle: 中心点位置，例子中的center: 某个确定位置的固定颜色，设置模式通常为color percentage/length，例子中的red 0, blue, green 100%
有径向渐变的基础，我们就可以利用这个属性来做些文章。
比如将中间部分设置为透明色，外层设置为黄色，就可以实现一个圆环或者椭圆环效果。
/* 设置中空的椭圆环 */ radial-gradient( ellipse at center center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, #ffcc33 21%, #ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24% ); 复制代码
看起来是不是很像一根面条，有可能一根面条带来的观感不够强烈，我们添加多组不同的径向渐变，不多说了，看饿了。
🍳 煎蛋
早上光吃面条可不行啊，一方面营养不够，另一方面，你吃你也噎啊。咱们来添加点开胃小菜助助兴，首先咱们添加个鸡蛋保证充足的营养。
煎蛋的实现与勺子类似，大椭圆蛋清加小椭圆蛋黄，最后添加一下内外阴影修饰，美味的煎蛋就摆在碗中了。
蛋清部分:
.egg{ border-radius: 50%/60% 60% 40% 40%; box-shadow: inset 0 -5px 2px 0 rgb(0 0 0 / 10%), 1px 5px 5px 0 rgb(0 0 0 / 30%); } 复制代码
蛋黄部分:
.egg:before { background: #fc0; border-radius: 50%; box-shadow: 0 0 1px 1px #f90, inset 0 0 5px 1px rgb(255 153 0 / 50%) } 复制代码
让煎蛋稍微旋转一下，摆盘的艺术。
.egg { transform: rotate(20deg); } 复制代码
🍖 海苔、火腿
添加完煎蛋后，可以添加点咸菜，比如火腿啊、海苔等，我们就可以吃完这碗热腾腾的早餐面，快快乐乐的打工去了。
两者的实现方法与上文极度类似，因此不再扩展讲述。
🛕 源码仓库
传送门: 早餐面
如果感觉有帮助的话，别忘了给小包点个 ⭐ 。
💘 往期精彩文章
- 牛客最新前端JS笔试百题
- 牛客最新前端面经面试题汇总(含解析)
- CSS实现一只自由飞翔的鸟儿🐦
- 抓取牛客最新前端面试题五百道 数据分析JS面试热点
- 给VSCode和网站领养喵咪 一起快乐撸猫
- 原生JavaScript灵魂拷问(一)，你能答上多少？
- JavaScript之彻底理解原型与原型链
- JavaScript之彻底理解EventLoop
- 《2w字大章 38道面试题》彻底理清JS中this指向问题
- 参考链接: codepen.io/aaronchuo/p…
💥 后语
伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞👍或者关注➕都是对我最大的支持。
另外如果本文章有问题，或者对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！
