效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/comehop??e/pen/aaoveW互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3q28tB源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含4个元素：/figure>居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：木瓜鞭；}定义容器尺寸：.duck{width:10em;高度：10em；}使用grid在2*2中布局4个正方形：.duck{display:grid;grid-template-columns:repeat(2,1fr);}.duckspan{background-color:seagreen;}将容器旋转45度:.duck{transform:rotate(-45deg);}设置每个的圆角正方形，组合成鸭子的抽象形状：.duckspan:nth-child(1){border-top-left-radius:100%;}.duckspan:nth-child(2){border-top-right-radius:100%;}.duckspan:nth-child(3){border-bottom-right-radius:100%;}.duckspan:nth-child(4){border-bottom-left-radius:100%;}设置为最后一个方块设置不同的颜色使其看起来像鸭嘴：.duckspan:nth-child(4){background-color:coral;}在第二个正方形上用径向渐变画一个点来代表鸭嘴Eyes:。duckspan:nth-child(2){background-image:radial-gradient(black0.5em,transparent0.5em);}大功告成！
