.left_lafe{width:100像素；高度：100px；背景：线性渐变（-130deg，#86e798，#52ce63）；边界半径：5%95%50%50%/5%50%50%95%；位置：绝对；左：50px；底部：-16px；变换：旋转（5度）；}.right_lafe{宽度：100px；高度：100px；背景：线性渐变（-130deg，#86e798，#52ce63）；边界半径：95%5%50%50%/50%5%95%50%；位置：绝对；右：20px；底部：-30px；transform:rotate(5deg);}两片叶子的水平低于中间的叶子和菠萝的身体，所以两片叶子的覆盖区域有一层阴影来表示水平。阴影是用伪元素和渐变实现的。下面是左叶的影子：画一个和左叶一样的形状，使用渐变和颜色透明度。.left_lafe::before{内容：'';宽度：100px；高度：100px；位置：绝对；边界半径：5%95%50%50%/5%50%50%95%；背景：线性渐变（-25deg，rgba（51、51、51、0.3），透明）；右边的叶子也是一样的，我们看一下头部叶子的整体效果：身体开始画小菠萝。部分层次高于叶子