使用CSS做一碗营养充足的早餐面

🎄前言

愉快的周末又要结束了，又要迎来新的打工日，小包心中有一丝悲伤。(那是绝对不可能啊，小包爱工作，老板看到希望能给加点工资)

不管未来的路会有多苦多难，饭的质量一定要跟上，特别是早饭，重要的不得了啊！于是小包为了大家的身心健康考虑，亲自下厨，使用 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);
复制代码

经过上面两步，就可以得到勺子的最初形态——平面勺子。

• 添加内外阴影

在具体设置阴影之前，先补充一点阴影方面的知识:

1. inset 阴影水平方向设置为 0，垂直方向设置为负值，那么阴影会从底部往上蔓延。
2. 如果设置多个阴影，先设置的阴影权重高，当阴影发生重合时，权重高的阴影会覆盖权重低阴影

/* 勺柄 */
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…

💥 后语

伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题，或者对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！