前端日常实践：41#视频演示如何用纯CSS画出栩栩如生的铅笔
时间：2023-03-30 15:10:56
CSS
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/PaZYBw交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cEQqefK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3部分：笔头、笔架（含文字）和橡皮擦：中国制造
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:lightskyblue;}定义铅笔的大小:.pencil{position:relative;宽度：50em；height:3.5em;}画桶：.pencil.barrel{position:absolute;宽度：40em；左：4em；背景色：绿色；border-top:1emsolidforestgreen;border-bottom:1emsoliddarkgreen;}设置笔架上文字的样式：.pencil.barrel{line-height:1.5em;字体系列：无衬线；文本转换：大写；颜色：银色；text-align:center;}使用伪元素绘制笔头：.pencil.taper::before,.pencil.taper::after{conte新台币：'';位置：绝对；左：-4em；边框样式：实心；border-width:calc(3.5em/2)4em;}.pencil.taper::before{border-color:transparentburlywoodtransparenttransparent;}.pencil.taper::after{border-color:transparentgreentransparenttransparent;transform:scale(0.3);}画橡皮擦：.pencil.eraser{position:absolute;右：0；宽度：6em；高度：1.5em；背景色：浅粉色；顶部边框：1em纯粉色；border-bottom:1emsolidlightcoral;border-top-right-radius:0.5em;元素在橡皮擦上绘制铁箍：.pencil.eraser::before{content:'';位置：绝对；顶部：-1em；左：0；宽度：1.5em；高度：1.5em；背景色：银色；border-top:1emsolidlightgray;border-bottom:1emsolidgray;}最后，添加阴影：.pencil{filter:drop-shadow(5px10px3pxgray);}大功告成！
