世事无常巨星陨落。特以此作品纪念篮球巨星排名科比·布莱恩特。

按下右侧的“点击预览”按钮可以在当前页面预览点击链接可以全屏预览。

每日前端实战系列的铨部源代码请从 github 下载：

令容器居中设置页面背景色为由紫色到黑色的径向渐变：

设置容器尺寸、字号，放大篮球这里用 vmin 单位，使图案占据窗口宽高的一半：

用 ::before 伪元素绘制光环容器比主元素宽20%，但高度只有主元素的30%形状为一个矩形，边框为橙色：

为边框加圆角使光環变圆：

为光环加上光晕，光晕的颜色是半透明的黄色：

接下来用 ::after 伪元素绘制阴影阴影与主元素等宽，但高只有主元素的20%定位到主元素的底部，背景色为半透明的黑色：

为阴影容器加圆角属性使阴影变圆并将阴影置于篮球后面：

• 径向渐变背景，《CSS3 艺术》第4.3节
• 主元素与偽元素的重叠关系《CSS3 艺术》第1.9.3节

关于我、我的专栏和我的书

张偶，网络笔名 @comehope20世纪末触网，被 Web 的无穷魅力所俘获自此始终战斗在 Web 开发苐一线。

《前端每日实战》专栏是我近年来实践 PBL（project-based learning）方法的结果，以项目驱动学习展现从灵感闪现到代码实现的完整过程，亦可作为湔端开发的练手习题和开发参考

拙作《CSS3 艺术》一书于2020年1月由人民邮电出版社出版，全彩印刷使用100多个生动美观的实例，系统地剖析了 CSS 與视觉效果相关的重要语法并含有近10小时的视频演示。京东/天猫/当当有售配套资源请访问人民邮电出版社公众号：