前端日常实战：13#视频演示纯CSS制作热气腾腾的咖啡杯
时间：2023-04-05 01:02:51
HTML5
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览全文屏幕。https://codepen.io/zhang-ou/pen/xjXxoz交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cBm4eU9源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/013-hot-coffee-cup代码解读定义了dom，一个名为coffee的容器，其中包含一个名为cup的元素：
中心显示：html,body{height:100%;对齐项目：居中；证明内容：居中；background-color:brown;}绘制杯子主体：.coffee.cup{width:10em;高度：9em；背景色：白色；border-bottom-left-radius:1.5em;border-bottom-right-radius:1.5em;}用伪元素画出杯口：.coffee.cup{position:relative;}.coffee.cup::before{content:'';位置：绝对；宽度：100%；高度：2em；背景颜色：巧克力色；边框：0.5em纯白色；框大小：边框框；边界半径：50%；顶部：-1em；盒子阴影：插入001emrgba(0,0,0,0.5)；绘制杯柄的伪元素：.coffee.cup::after{content:'';位置：绝对；宽度：3em；高度：3.5em；边框：0.8em纯白色；边界半径：50%；顶部：20%；left:80%;}dom元素添加托盘：
