这份作品是「Frontend Challenge - Comfort Food Edition」CSS 艺术类的参赛投稿，我想用代码呈现南印度最具代表性的安慰食物——马萨拉扁豆饼（Masala Dosa）。 金黄酥脆的扁豆饼，配上土豆马萨拉、椰子酸辣酱、番茄酸辣酱，再加一碗热腾腾的桑巴汤，这种组合不只是填饱肚子，更是很多人记忆里熟悉又安心的味道。我决定不借助任何食物图片或外部图形，完全用 HTML 和 CSS 把一整盘扁豆饼画出来，做成一幅小小的 CSS 插画。 项目的关键在于，如何让纯代码呈现出食物的质感与温度。我没有为扁豆饼单独准备图片，而是用多层渐变和圆角形状搭建它的主体结构；通过不同的颜色与纹理变化，做出饼皮酥脆、金黄的视觉效果。径向渐变和重复渐变在模拟食材表面细节时特别有用，让扁豆饼看起来不像是简单的一块色块，而是一张有焦斑、有厚度的饼。 接下来是盘中各个元素的搭建： 马萨拉扁豆饼——用多组渐变、阴影和分层形状组合而成，模拟酥脆饼皮与折叠结构； 土豆马萨拉——用小型 CSS 形状表现土豆块、洋葱和咖喱叶； 椰子酸辣酱——以圆形 CSS 形状呈现，并加入细腻的纹理细节； ️ 番茄酸辣酱——同样是纯 CSS 的圆形元素，用分层渐变做出浓郁色泽； 桑巴汤——用小碗容器配合嵌套圆环与渐变，模拟汤碗和液面； 香蕉叶——用渐变、阴影和 CSS 绘制的叶脉还原自然质感； ♨️ 蒸汽——通过 CSS @keyframes 动画让蒸汽缓缓升起，让整盘扁豆饼像刚端上桌一样冒着热气。 整个项目取名为“CSS Masala Dosa — A Plate of Comfort”。剥开一层渐变和阴影，你会发现，代码和食物一样，都有让人感到踏实的能力。

打开网易新闻 查看精彩图片