?项目地址：
?开始游戏：前言
这篇主要讲讲奇妙的shadow，探究前端脱离img的可能性，实践页面---
基础
分析shadow前，我们先简单的看一下box-shadow的基本属性
boxShadow: 10px 10px 5px 10px #888888 outset;box-shadow: h-shadow v-shadow blur spread color inset;复制代码
boxShadow: 10px 10px 5px 10px #888888 outset， 20px 10px 10px 15px #888888， 10px 10px 10px 20px #888888;复制代码
先看一个?
简单分割一下元素
- 底部大星球（这个小人怎么感觉有点眼熟，23333）
- 闪烁小星星
- 用来许愿的流星
- 耀眼大恒星
大背景就是简单的渐变
background: linear-gradient(to bottom, #081d3e, #214f9f);复制代码
底部大星球
box-shadow: 200px -20px 50px #58d1ff, -200px -20px 50px #783be7, 0px -2px 5px #ffffff, inset 0px 0px 15px rgba(125, 135, 255, 1);复制代码
效果：
小星星
小星星比较简单，一个✨实体+白色外阴影
第一次绘制母星，追求完美，绘制出了
background: radial-gradient(circle at top left, transparent 3px, #fff 0) top left, radial-gradient(circle at top right, transparent 3px, #fff 0) top right, radial-gradient(circle at bottom right, transparent 3px, #fff 0) bottom right, radial-gradient(circle at bottom left, transparent 3px, #fff 0) bottom left;复制代码
但是，发现用shadow复制出的子星，无法还原母体形状，实际上母星元素形状并没有发生改变，我们只是改变了背景颜色
@width: 500;@hight: 650;@count: 12;@random: `Math.random() `;@0px: 0px;.getShadow(@top, @left) { box-shadow+: @left @top #fff, @left @top 8px 1px #fff;}.loopShadow(@i) when (@i < @count) { @top: floor(@random* @hight) + @0px; @left: floor(@random* @width) + @0px; .getShadow(@top, @left); // box-shadow+: @left @top #fff, @left @top 8px 1px #fff; .loopShadow(@i+1);}复制代码 开始尝试的时候用的是注释的那行代码，按常理，一次循环中两次用到的@left和@top应该是同样的值，但实际两个@left是不同的，导致星体和发光背景位置分离了，不过借助函数再构造一个独立作用域倒也能实现，
交替闪烁的效果，可以复制两个元素 效果如下流星
大恒星
看下(暂时没有适配pc端)
可以看到除了色值和那个耀斑的一点小差别外，总体实现效果还是差强人意的
shadow动画
-
简单版本烟花，先看效果
-
加上一点点数学，对烟花散射的位置做一点控制，学笛卡尔向心动❤️的女神表白（不存在的）
最后还有一点小小的瑕疵，烟花在落点在曲线上并不是均匀分布的，在斜率大的地方更稀疏，原因是我们的构造函数在一个坐标轴上均匀，并没有在变化率上做文章，有兴趣的同学，运用微积分做细致的控制
总结
最后总结一下shadow的能力吧！ 除了字面意思上，可以制造内外阴影外，实际我们还能创建任意（位置，大小， 颜色，失焦距离）的元素，此外结合动画，在上述这些属性上作出渐变动画，
在性能上，远远优于使用js来创建同样效果的dom动画，毕竟shadow的渲染实际没有多余创建dom元素，打开chrome控制台我们可以看到，浏览器将整个创建了shadow的范围作为一个GraphicsLayer交给GPU，至于渲染的具体细节暂时不做深挖，后续再通过专题探讨。