世事无常，巨星陨落。这部作品献给篮球巨星科比·布莱恩特。效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/OJPGGmV源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解读1、画一个篮球来定义DOM结构，只有一个名为.ball的
元素，其中包含一个篮球图案的unicode字符：?
将容器居中，设置页面背景色为Radialgradientfrompurpletoblack:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-image:radial-gradient(circle,#542482,black);}效果如下图：设置容器大小，字体大小，篮球放大。这里，vmin单位用于使图案占据窗口宽度和高度的一半：.ball{width:50vmin;高度：50vmin；字体大小：50vmin；line-height:1em;}效果如下：2.绘制光晕使用::before伪元素绘制光晕容器，比主元素宽20%，但高度只有主元素的30%主要元素。形状为矩形，边框为橙色：.ball{position:relative;}.ball::before{content:'';位置：绝对；宽度：120%；高度：30%；左：-10%；顶部：-20%；边框：2vmin实心橙色；:border-box;}效果如下图：给边框添加圆角，使光晕变圆：.ball::before{border-radius:50%;}效果如下：添加一个halo到光晕，光晕的颜色是半透明的黄色：.ball::before{box-shadow:000.1emhsla(60,100%,50%,0.5);}效果如下：3.绘制光晕接下来使用::after伪元素绘制阴影。阴影与主元素一样宽，但高度只有主元素的20%，位于主元素底部，背景颜色为半透明黑色：.ball::after{content:'';位置：绝对；宽度：100%；高度：20%；左：0；底部：0；background-color:hsla(0,0%,0%,0.6);}效果如下：给shadowcontainer添加一个圆角属性，让阴影变圆，将阴影放在篮球后面：.ball::after{边界半径:50%;z-index:-1;}效果如下：大功告成！参考径向渐变背景，《CSS3 艺术》第4.3节底纹，《CSS3 艺术》第5.1.1节主伪元素重叠关系，《CSS3 艺术》第1.9.3节关于我，我的专栏，我的书我的笔名是@comehop??e.20世纪末接触互联网，被网络的无穷魅力所折服。从那以后，我就一直战斗在Web开发的第一线。《前端每日实战》专栏是我这几年实践PBL（project-basedlearning）的成果，以项目驱动学习，展示了从灵感闪现到代码实现的完整过程，也可以作为前端开发的实践练习和开发参考。我的书《CSS3 艺术》由人民邮电出版社于2020年1月出版，全彩印刷。运用100多个生动优美的实例，系统分析了CSS视觉效果相关的重要语法，并附有近10小时的Videodemo。京东/天猫/当当网均有售。配套资源请访问人民邮电出版社公众号：https://mp.weixin.qq.com/s/6X42QkZ5N8JNji8aQ2FFcQ