前端日常实践：143#视频演示如何使用CSSGrid布局制作小松鼠印章
时间：2023-04-05 18:27:34
HTML5
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/YOoXpv互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c7KdMt8源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器代表邮票：
centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:teal;}设置容器尺寸：.stamp{position:relative;宽度：45em；高度：63em；字体大小：6px；填充：5em；background-color:white;}用重复的背景绘制邮票的穿孔：.stamp{display:flex;弹性方向：列；对齐项目：居中；证明内容：居中；}.stamp::after,.stamp::before{content:'';宽度：100%；高度：100%；位置：绝对；背景：径向渐变（圆形，青色50%，透明50%），径向渐变（圆形，青色50%，透明50%）；背景大小：3.5em3.5em;}。邮票::之前{顶部：1.5em;背景重复：重复-y；背景位置：-4%0,104%0;}.stamp::after{左：1.5em;背景重复：重复-x；background-position:0-3%,0103%;}在html文件中加入小鸡的dom元素，子元素分别代表耳朵、头、身体、下尾、上尾、腿、爪：
