用 CSS 制作盘子上的苹果：一段美味的旅程🍏

这是 DEV Challenge v24.03.20 的参赛作品，CSS Art：最喜欢的零食。

灵感

想不想来点超级美味的青苹果🍏补充维生素？

演示

旅行

我上次用 CSS 画画还是好几年前，当时我在做 freeCodeCamp 的 CSS 项目。所以，没什么高阶技巧，只是随便画画而已😃 嗯，不只是画画，是盘子里的苹果！

令人惊叹的是，仅仅使用 s 就能实现这么多事情box-shadow。但首先，让我们从头开始：

1. 盘子

我用两个 div 元素来表示盘子——内侧和外侧分别用它们来表示。我使用了CSS 的clip-path属性来裁剪超出盘子边缘的 div 元素。这可能不是最佳方案，但这是最简单的方法，而且在实际工作中很少用到这个属性，所以不妨一试。

2. 苹果

Apple 最初是一个 div 元素，其border-radius不同角落的值各不相同，目的是创造一个“不完美”的形状。

调整box-shadow阴影以达到完美的 3D 效果就像给一道菜调味一样——太少，味道寡淡；太多，味道又过于浓烈。经过一番如同烹饪马拉松般的反复调整，我终于找到了“完美”的瞬间，一切都恰到好处。谁能想到 CSS 的制作过程竟像主持烹饪节目一样，每一次阴影调整都像是在菜肴里加一小撮盐？

当然，我不能就此止步，每个苹果的果柄周围都有一个凹陷（孔）。

如果您像我一样不太熟悉苹果公司的术语：

苹果的果柄是连接苹果和树干的细小枝状部分。它就像苹果的生命线，在苹果生长过程中从树上输送养分。苹果成熟采摘后，果柄会留在果实顶部，成为一小段木质突起。这常见的景象通常象征着新鲜和自然生长。

我尝试了不同的形状，但最终还是选择了圆形旋转的div，当然，在帮助下，box-shadow我设法让它看起来更自然。

之后我添加了一个棕色的div元素（stick），为了使其看起来更不完美，我使用了背景渐变和CSS变换函数skew。

3. 叶子

为了制作叶子，我使用了linear-gradient背景，并skew利用函数改变其形状，border-radius使其在不同角度下呈现不同的形状，当然还有其他效果box-shadow。

为了在叶片上制作叶脉，我使用了几个绝对定位的div元素。借助skew函数，我成功地制作出了非常细的叶脉。

结论

这是我在这里的第一篇帖子，希望你们喜欢，并且能和我一起学习一些苹果术语！