今天是二十四节气，也就是夏天的第二个节气。不知不觉，又一年的夏天来临了。面对烈日炎炎，夏天吃的水果少不了。今天用CSS给大家带来一个提前解暑的水果拼盘~以上是序言15种水果，你看出来是什么水果吗？相对没那么逼真，但相信大家也能猜出大概的名字。下面我们将对代码进行展开，说明各自的实现过程。在看下面的代码之前，你可以想一想你会用什么来实现上面的图呢？为了保护文章的本质，一些非主要代码没有完整贴出来。有不懂的可以留言交流~代码实现苹果#1只需要一个标签，苹果的整体形状根据border-radius的不同值显示,并通过box-shadow实现侧阴影，以及两个伪元素实现顶部手柄和两个突出部分。.apple{宽度：6em;高度：5em；背景色：#ff4355；盒子阴影：插入0.2em-0.2em#cc1022；边界半径：2em2em3em3em;}.apple:before{top:-0.2em;左：1.8em；内容：””;宽度：4.1em；高度：2.75em；背景色：继承；边界半径：3em3em00；位置：绝对；box-shadow:-1.5em00#ff4355,inset0.2em0.2em#ff4355;}.apple:after{content:"";宽度：0.2em；高度：1em；背景颜色：棕色；位置：绝对；z-指数：2；顶部：-0.5em；left:3em;}Tangerine#2的主要部分是一个标签，通过box-shadow实现一个圆并添加阴影。然后添加一个before伪元素来实现树叶。叶子是基于边界实现的。通过在两个方向设置颜色形成色差，border-radius叶子在两个方向设置的感觉就出来了。.orange{宽度：5.6em;高度：5.6em；边界半径：50%；背景色：#ffb526；box-shadow:inset0.2em-0.2em#cc8a0c;}.orange:before{content:"";位置：绝对；顶部：-1em；左：3em；高度：0；宽度：0；边框：1em实心#539e3d；边界半径：50%050%0；-right-color:#437512;}Banana#3香蕉的头和尾是基于两个伪元素实现的，另外加入一个元素banana-line实现阴影的反面高亮。弯曲状态基于边界半径和框阴影实现。.banana{宽度：6em;高度：6em；背景颜色：透明；盒子阴影：-1.1em1.1em00#fcd110；border-radius:50%;}.banana:before{content:"";:0.3em;高度：0.3em；变换：旋转（45度）；背景色：#937714；位置：绝对；顶部：5.4em；左：4.3em；z-index:1;}.banana:after{内容：“”；宽度：0.4em；高度：0.8em；变换：旋转（31度）；背景色：#b3bb03；位置：绝对；顶部：1.1em；左：0.2em；z-index:1;}.香蕉线{宽度：5.5em;高度：5.8em；背景颜色：透明；盒子阴影：-0.4em0.4em00#ffe23c；边界半径：50%；位置：绝对；顶部：-0.7em；左：1.7em；transform:rotate(-4deg);}Lemon#4比较简单，只需要一个元素，主要使用border-radius和box-shadow，再加一个rotate就完成了。.lemon{宽度：5.1em;高度：5.1em；边距：0.8em；背景色：#ffe135；边界半径：50%15%；盒子阴影：插入0.2em0.2em#ccb42a；transform:rotate(225deg);}pear#5的主要部分通过在方向上设置一个较小值的border-radius来增加旋转。伪元素在顶部实现句柄部分。.pear{宽度：5.4em;高度：5.4em；顶部边距：1.2em；背景色：#d7c322；边界半径：50%15%50%50%；变换：旋转（-45deg）；阴影：插入0.15em0.25em#c3b11f;}.pear:after{content:"";宽度：0.2em；高度：1em；背景颜色：棕色；位置：绝对；z-指数：2；顶部：-0.2em；左：5.1em；transform:rotate(45deg);}strawberry#6的主要部分和梨类似，只是方向不同。草莓上的多个白点并不是多重元素，而是基于box-shadow参数实现的。最上面的叶子看起来像一个六边形，但实际上是两个三角形以不同的角度叠在一起。.strawberry{宽度：5em;高度：5em；顶部边距：0.7em；背景色：#ed2607；边界半径：50%15%50%50%；变换：旋转（135度）；-0.15em-0.25em#c62106;}.strawberry:before{内容：“”；位置：绝对；顶部：3.5em；左：2em；宽度：0.3em；高度：0.3em；-半径：50%；框阴影：1.7em000白色，-1em-2.8em00白色，2.5em-1.5em00白色，2em-2.5em00白色，0.75em-1.5em00白色，-1em-1em00white,0.8em-3.2em00white;}Blueberry#7比较简单，就是在上面的侧阴影的基础上，然后在上面加上伪元素，实现阴影部分。.blueberry{宽度：6em;高度：5.5em；边界半径：50%；背景色：#89a2ca；box-shadow:inset0.2em-0.2em#6081b8;}.blueberry:before{内容：“”;宽度：2em；高度：1em；左：2em；位置：绝对；背景色：#3e4d64；border-radius:50%;}peach#8和orange#2类似，只是border-radius的值不同，其他都差不多。.peach{宽度：6em;高度：5em；背景色：#f87a95；框阴影：插入0.2em-0.2em#cd6179；边界半径：2.5em2.5em3em3em;}.peach:before{content:"";位置：绝对；顶部：-1.7em；左：3em；高度：0；宽度：0；边框：1em实心#539e3d；边界半径：50%050%0；437512；border-right-color:#437512;}Cherry#9这两种樱桃是由两个不同的元素实现的，但本质代码是一样的，只是对应的位置不同。解释下绿色是如何实现的，定义一个透明的矩形块，将border-radius增加50%，然后使用box-shadow填充绿色。.cherry{宽度：3em;高度：2.5em；背景色：#c20e2b；框阴影：插入0.2em-0.2em#9b0b22；边界半径：2.5em2.5em4em4em；位置：绝对；}.cherry1{顶部：3em；左：0.2em；变换：旋转（15度）；}.cherry2{顶部：3em；左：3.4em；变换：旋转（-15deg）；}.cherry1：before{内容：“”；宽度：1em；高度：2.8em；背景颜色：透明；盒子阴影：0.2em-0.1em00#539e3d；边界半径：50%；位置：绝对；顶部：-2.6em；左：1em；变换：旋转（19度）；}.cherry2：之前{内容：“”；宽度：1em；高度：2.8em；背景颜色：透明；盒子阴影：0.2em-0.1em00#539e3d；边界半径：50%；位置：绝对；顶部：-2.5em；左：0.5em；变换：旋转（-12deg）；}.cherry-join{宽度：0.7em；高度：0.4em；顶部：0.6em；左：3.1em；位置：绝对；背景色：#724126；边界半径：20%；transform:rotate(-12deg);}树莓#10个相对就比较复杂了，定义很每个水果都是由多个元素实现的，通过不同的定位来实现，但是注意左边每个水果都有阴影，所有的结构都是一左一右。阴影可以稍后由nth-child(2n+0)设置。顶部叶子与草莓一致，两个三角形组合在一起。.berry{宽度：1.7em;高度：3.5em；边界半径：10%10%50%50%；位置：绝对；左：2.5em；顶部：1.1em；z-index:1;}.raspberry{背景色:#d33653;左边框：0.3em实心#d33653；border-right:0.3emsolid#d33653;}.berry-ball{width:1.3em;高度：1.3em；:50%;}.berry-ball1{top:4.1em;左：2.6em；}...code.berry-ball8{上：1.5em；左：3.9em;}.raspberry-leaf-up{上：0.5em;左：2.6em；z-index:2;}.??raspberry-leaf-down{top:1em;左：2.6em；z-index:2;}.??raspberry-ball:nth-child(2n+0){box-shadow:inset0.1em-0.1em#a82b42;}.raspberry-ball{background-color:#d33653;}Blackberry#11同上，只是设置了不同的颜色。.blackberry-ball,.blackberry{background-color:#5d46a0;}.blackberry{border-left:0.3emsolid#5d46a0;border-right:0.3emsolid#5d46a0;}.blackberry-ball:nth-child(2n+0){box-shadow:inset0.1em-0.1em#3d2475;}Watermelon#12设置一个方向的border-radius到100%，并加绿色边框，白色西瓜子是基于多个box-shadow参数实现的。为了逼真，加了一个伪元素来实现西瓜两边的阴影。.watermelon{位置：相对；宽度：0；边框：2.2em实心#f33；边界半径：100%000；盒子阴影：-0.25em-0.25em00.25em#373；transform:rotate(-135deg);}.watermelon:before{content:"";位置：绝对；底部：0.2em；右：0.2em；宽度：0.33em；高度：0.33em；50%；盒子阴影：1.75em000#fff，01.75em00#fff，2.5em-1.5em00#fff，-1.5em2.5em00#fff，2em2em00#fff；}.watermelon:after{内容：“”；位置：绝对；顶部：-2.6em；左：-2.6em；宽度：4.8em；高度：4.8em；box-shadow:inset-0.35em-0.35emrgba(0,0,0,0.2);}Avocado#13主要分为两部分，果肉是一块，果核是一块。肉肉部分通过设置border-radius实现椭圆形，用不同的背景色和边框色绘制出深浅部分。果核部分通过伪元素模拟反光部分，使结果更加逼真。.avocado{位置：相对；宽度：3em；高度：4.2em；左边距：1em；背景：#cde06d；边界半径：50%50%50%50%/75%75%40%40%；:0.6em固体#9fcd65;box-shadow:0002px#3c632b;}.inner{position:absolute;底部：8%；左：16%；背景：#98602d；:55%;身高：48%；边界半径：50%50%50%50%/60%60%40%40%;}.inner:after{content:"";高度：80%；宽度：80%；不透明度：0.7；背景：#ffffff；位置：绝对；左：13%；顶部：14%；变换：旋转（8deg）；%40%;}.inner:before{内容：“”；位置：绝对；宽度：80%；高度：95%；左：6%；背景：#98602d；变换：旋转（20度）；50%50%50%50%/60%60%40%40%；z-index:1;}Slicedorange#14也可以分为两个主要部分，里面把果肉分成六块三行，基于一个元素和元素里面的两个伪元素实现。另一部分是实现主要的果皮和果肉部分，通过设置不同的box-shadow绘制不同深浅的橙色。.fruit-orange{宽度：5em;高度：5em；边界半径：50%；位置：相对；显示：弹性；证明内容：居中；对齐项目：居中；背景：#f57400；}.fruit-orange::after{内容：“”；位置：绝对；宽度：0.5em；高度：0.5em；顶部：计算（50%-0.22em）；左：计算（50%-0.22em）；背景：#fffab9；z-指数：10；边界半径：50%；box-shadow:003px2px#fffab9;}.fruit-orange::before{position:absolute;内容：””;宽度：100%；高度：100%；边框：1px实心#f57400；框阴影：000.1em1pxrgb（0、0、0、0.4），001px0.2em#fec70c插图，000.2em0.3em#fce819插图，000.2em0.5em#fffab9插图，000.2em0.7em#fffab9插图；border-radius:50%;}.slices{position:absolute;z-指数：5；宽度：4em；高度：0.3em；背景：#fffab9；box-shadow:000.05em1px#fffab9;}.slices::before{content:"";位置：绝对；z-指数：5；顶部：0px；左边：0像素；宽度：100%；高度：100%；背景：#fffab9；变换原点：中心；变换：旋转（60度）；盒子阴影：000.05em1px#fffab9;}。：“”；位置：绝对；z-指数：5；顶部：0px；左：0px；宽度：100%；高度：100%；背景：#fffab9；box-shadow:000.05em1px#fffab9;}SlicedLemon#15这个和#14SlicedOrange的实现方式一样，只是颜色不同。基于这段代码，你还可以画出葡萄柚等类似的水果。fruit-lemon{background:#fddd09;宽度：5em；高度：5em；边界半径：50%；位置：相对；显示：弹性；证明内容：居中；align-items:center;}.fruit-lemon::before{position:absolute;内容：””;宽度：100%；高度：100%；边框：1px实心#e9ce1d；框阴影：000.1em1pxrgb（0、0、0、0.4），001px0.2em#fec70c插图，000.2em0.3em#fce819插图，000.2em0.5em#fffab9插图，000.2em0.7em#fffab9插图；border-radius:50%;}最后整体的代码分析就结束了，看看结局离你的预期还有多远。如果大家有更多更好的解决方案欢迎留言交流。觉得有用记得点赞收藏，说不定哪天会用到呢~专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）
