廉价的珠子：box-shadow生产

马黑黑

珠子是圆的，主元素设置为 border-radius: 50% 后投射出一定距离的阴影也是圆的，我们可以依此原理炮制廉价的珠子。说他廉价，是因为此法不额外生成元素，仅仅增加一些字节数来表述阴影即可。

阴影的投放可以使用CSS标准的 box-shadow 属性，完整语法如下：

    box-shadow: aapx bbpx ccpx ddpx color;

常用语法则省略第三个参数：

    box-shadow: aapx bbpx ccpx color;

其中，aa，bb，cc 为数字，aa表示阴影离元素的水平方向、bb垂直方向的距离，接受负值（往左、往上），cc是模糊距离（即阴影模糊边缘部分的尺寸），cc实际上是spread，阴影扩展；color是颜色，不用多说。

用阴影做珠子，我们只用到前面两个参数加颜色。例如，以下嵌入了 style 代码 的 HTML 盒子，会在元素的左下方产生与元素大小一样的形状，这个形状实际上是阴影：

<div style="margin:60px auto; width: 40px; height: 40px; border-radius: 50%; background: red; box-shadow: -60px 60px rebeccapurple"></div>

红色的是元素自身，丽贝卡紫的是阴影。

理论上，box-shadow 可以无限叠加，只要设置好阴影的位置，所叠加的阴影便是一个个元素形状的“复制品”，颜色还可以自定义。叠加方法如下：

    box-shadow: -60px 60px rebeccapurple, 0px 60px purple, 60px 60px pink;

上句，在前面例子原有阴影的基础上再叠加两个阴影，位置分别是正下、右下，效果如下：

以上仅提供了一个思路，用阴影做珠子。珠子很廉价，一分钱一分货，我们对用阴影做的珠子不能做太多的修饰。当然，要大批量生产廉价珠子，我们自己动手的话很麻烦，还是得请JS代工。

马黑黑

马黑黑

二楼效果，中间黑色的是元素，其余周边的都是阴影。代码:

1. <style>
   
2. #circle {
   
3.         margin: 200px auto;
   
4.         width: 10px;
   
5.         height: 10px;
   
6.         background: black;
   
7.         border-radius: 50%;
   
8. }
   
9. </style>
   
10. 
    
11. <div id="circle"></div>
    
12. 
    
13. <script>
    
14. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
15. 
    
16. circle.style.boxShadow = makeshadow(20);
    
17. 
    
18. function makeshadow(total) {
    
19.         let str = '';
    
20.         Array.from({length: total}).forEach((ele) =>
    
21.                 str += `${num(-200,200)}px ${num(-200,200)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`);
    
22.         str = str.substring(0,str.length - 1);
    
23.         return str;
    
24. }
    
25. </script>

复制代码

马黑黑

js代码简单解释：

14行：构建生成随机整数的 num 函数；
16行：设置元素 circle 的阴影，调用炮制阴影函数 makeshadow()，调用参数 20 表示制造 20 个阴影；

18至24行：makeshadow(total) 函数，total是函数所需参数，用于接收调用者传递来的阴影总数量。该函数拼接 total 个随机位置的阴影的表达字符串，然后去除最后一个逗号（22行）并返回该字符串（23行）。

樵歌

珠子孝能一生二二生三，，，，小美铝能不能哇

红影

二楼的那么简单的JS，就能生成那么多阴影啊，太厉害了

红影

和margin: 200px auto;有关么？如果这个值设小点，会这样？

红影

let num = (min, max) => ，，，的最大最小怎么取值的没看懂

马黑黑

红影 发表于 2022-7-16 10:29
let num = (min, max) => ，，，的最大最小怎么取值的没看懂

这个我解释过一次的。函数的传统写法可能更有助于理解：

function num(min, max) {
    let number = Math.random() ; //得到 0-1之间的随机浮点数（包含0但不包含1）
    number = number * (max - min + 1); //得到 0至max-1 的浮点数
    number = number + min; // 得到 min 至 max 的浮点数
    number = Math.floor(number); 向下取整数，则得到 min 至 max 的整数    return number; // 返回结果
}

而我编写的简化函数，就是上面传统函数的简化。

马黑黑

樵歌 发表于 2022-7-16 10:13
珠子孝能一生二二生三，，，，小美铝能不能哇

能，生出的样纸吓你一跳

马黑黑

红影 发表于 2022-7-16 10:26
和margin: 200px auto;有关么？如果这个值设小点，会这样？

margin是外边距，只是用它来设置一下元素的位置，挪出更多上下左右的空间用来显示阴影。

马黑黑

红影 发表于 2022-7-16 10:26
二楼的那么简单的JS，就能生成那么多阴影啊，太厉害了

可简单可复杂，看个人选择编写方式

加林森

来学习。

红影

马黑黑 发表于 2022-7-16 10:58
可简单可复杂，看个人选择编写方式

嗯嗯，你这个非常简洁，厉害

红影

马黑黑 发表于 2022-7-16 10:57
margin是外边距，只是用它来设置一下元素的位置，挪出更多上下左右的空间用来显示阴影。

嗯嗯，知道了。

红影

马黑黑 发表于 2022-7-16 10:48
这个我解释过一次的。函数的传统写法可能更有助于理解：

function num(min, max) {

是啊，好像打开来，更容易理解呢

马黑黑

红影 发表于 2022-7-16 13:57
嗯嗯，你这个非常简洁，厉害

不太复杂

马黑黑

红影 发表于 2022-7-16 13:59
是啊，好像打开来，更容易理解呢

个别已经能够正常工作的封装函数，不去理解它也是可以的，你就知道这个函数干嘛、我能用它干嘛就行。像我这个 num() 函数，它是用来取两个整数间包含这两个数在内的随机整数，封装好的，用它就行。例如，想在-2至10之间取一个随机数（包含-2和10），就这么用：

let mynumber = num(-2,10);

想去 0.1 - 1.9 之间的浮点数，行不行？事在人为：

let myNum = 0.1 * num(1,19);

马黑黑

红影 发表于 2022-7-16 13:59
是啊，好像打开来，更容易理解呢

传统的封装更接近自然语言

樵歌

马黑黑 发表于 2022-7-16 10:56
能，生出的样纸吓你一跳

那俺赶紧躲着从门逢缝里瞅