效果图
一 . 整体功能
-
该代码主要实现了一个梨的图形绘制，通过 HTML 结构和 CSS 样式组合，利用渐变、遮罩、裁剪路径、阴影等技术构建出梨的形状、颜色、纹理，以及梨的茎、身体、脸颊、嘴巴、眼睛等部位的外观，整体形成一个较为逼真的梨的图形展示，背景使用渐变营造出一定的氛围。
二. HTML 结构
-
页面主体结构较为简单，包含一个article元素作为梨图形的容器，article内部包含多个子元素，分别用于绘制梨的不同部分，如div.body用于绘制梨的主体部分，div.eye用于绘制眼睛（有两个），div.mouth用于绘制嘴巴，div.cheek用于绘制脸颊（有两个），div.stem用于绘制梨的茎。
三. CSS 样式
-
全局设置：设置html的字体大小为1vmin，使页面元素的尺寸根据视口大小自适应。body元素设置了最小高度为视口高度（100vh和100svh），背景使用线性渐变创建了一个双色渐变效果，从顶部到底部颜色过渡。
-
梨容器样式（article）：article元素设置为正方形（aspect-ratio: 1），宽度为90em，通过绝对定位使其在页面中水平和垂直居中（top: 50%; left: 50%; transform: translate(-50%, -50%);），背景使用径向渐变绘制了梨底部的阴影效果。
-
梨茎样式（stem）：
-
梨茎的宽度为容器宽度的10%，高度为容器高度的20%，通过多个径向渐变和线性渐变组合绘制颜色和纹理，模拟茎的立体感和光影效果，如使用径向渐变绘制茎的主体颜色（#963）和顶部的亮色部分（#ffc3），以及阴影效果（#0008等）。
-
裁剪路径（border-radius）设置为特殊形状，使茎的底部呈现弧形，顶部为尖形。使用遮罩（mask和-webkit-mask）进一步优化形状，去除不需要的部分。通过transform属性将茎旋转并向上移动到合适位置（translate(-50%, -90%) rotate(-5deg)）。
-
梨身体样式（body）：
-
梨身体的宽度为容器宽度的80%，高度为容器高度的90%，通过transform属性使其水平居中（left: 50%; transform: translateX(-50%);）。
-
遮罩（mask）使用多个径向渐变和线性渐变组合，定义了梨身体的形状，如通过径向渐变在顶部和底部创建凹陷效果，以及在两侧创建阴影和高光区域。
-
裁剪路径（clip-path）定义了梨身体的基本形状为一个圆润的多边形。背景使用多个线性渐变和径向渐变组合绘制梨身体的颜色和纹理，包括绿色（#56a06877、#26a048等）、棕色（#9fc89e）、白色（#fff7等）的过渡，模拟出梨的光影变化和表面质感，还在顶部和底部添加了一些细节渐变，如模拟梨的顶部凹陷（radial-gradient(40% 7% at 50% 100%, #0702, #0000)）。
点个赞吧！关注码途钥匙，后台回复（梨子）获取完整代码
点个赞吧！