廉价的珠子：box-shadow生产
<p>珠子是圆的，主元素设置为 border-radius: 50% 后投射出一定距离的阴影也是圆的，我们可以依此原理炮制廉价的珠子。说他廉价，是因为此法不额外生成元素，仅仅增加一些字节数来表述阴影即可。</p><p><br></p><p>阴影的投放可以使用CSS标准的 box-shadow 属性，完整语法如下：</p><p><br></p><p> box-shadow: <font color="#ff0000">aa</font>px <font color="#ff0000">bb</font>px <font color="#ff0000">cc</font>px <font color="#ff0000">dd</font>px color;</p><p><br></p><p>常用语法则省略第三个参数：</p><p><br></p><p> box-shadow: <font color="#ff0000">aa</font>px <font color="#ff0000">bb</font>px <font color="#ff0000">cc</font>px color;</p><p><br></p><p>其中，<font color="#ff0000">aa</font>，<font color="#ff0000">bb</font>，<font color="#ff0000">cc</font> 为数字，aa表示阴影离元素的水平方向、bb垂直方向的距离，接受负值（往左、往上），cc是模糊距离（即阴影模糊边缘部分的尺寸），cc实际上是spread，阴影扩展；color是颜色，不用多说。</p><p><br></p><p>用阴影做珠子，我们只用到前面两个参数加颜色。例如，以下嵌入了 style 代码 的 HTML 盒子，会在元素的左下方产生与元素大小一样的形状，这个形状实际上是阴影：</p><p><br></p><p><div style="margin:60px auto; width: 40px; height: 40px; border-radius: 50%; background: red; <font color="#ff0000">box-shadow: -60px 60px rebeccapurple</font>"></div></p><div style="margin:60px auto; width: 40px; height: 40px; border-radius: 50%; background: red; box-shadow: -60px 60px rebeccapurple"></div>
<p><br>红色的是元素自身，丽贝卡紫的是阴影。</p><p><br></p><p>理论上，box-shadow 可以无限叠加，只要设置好阴影的位置，所叠加的阴影便是一个个元素形状的“复制品”，颜色还可以自定义。叠加方法如下：</p><p><br></p><p> <font color="#ff0000">box-shadow: -60px 60px rebeccapurple, 0px 60px purple, 60px 60px pink;</font></p><p><span style="color: rgb(255, 0, 0);"><br></span></p><p>上句，在前面例子原有阴影的基础上再叠加两个阴影，位置分别是正下、右下，效果如下：</p><p><br></p><p><br></p>
<div style="margin:60px auto; width: 40px; height: 40px; border-radius: 50%; background: red; box-shadow: -60px 60px rebeccapurple, 0px 60px purple, 60px 60px pink"></div>
<p><br>以上仅提供了一个思路，用阴影做珠子。珠子很廉价，一分钱一分货，我们对用阴影做的珠子不能做太多的修饰。当然，要大批量生产廉价珠子，我们自己动手的话很麻烦，还是得请JS代工。</p> 本帖最后由 马黑黑 于 2022-7-16 09:03 编辑 <br /><br /><style>
#circle {
margin: 200px auto;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
}
</style>
<div id="circle"></div>
<script>
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
circle.style.boxShadow = makeshadow(20);
function makeshadow(total) {
let str = '';
Array.from({length: total}).forEach((ele) =>
str += `${num(-200,200)}px ${num(-200,200)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`);
str = str.substring(0,str.length - 1);
return str;
}
</script> 本帖最后由 马黑黑 于 2022-7-16 09:04 编辑
二楼效果，中间黑色的是元素，其余周边的都是阴影。代码:<style>
#circle {
margin: 200px auto;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
}
</style>
<div id="circle"></div>
<script>
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
circle.style.boxShadow = makeshadow(20);
function makeshadow(total) {
let str = '';
Array.from({length: total}).forEach((ele) =>
str += `${num(-200,200)}px ${num(-200,200)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`);
str = str.substring(0,str.length - 1);
return str;
}
</script>
本帖最后由 马黑黑 于 2022-7-16 09:12 编辑
js代码简单解释：
14行：构建生成随机整数的 num 函数；
16行：设置元素 circle 的阴影，调用炮制阴影函数 makeshadow()，调用参数 20 表示制造 20 个阴影；
18至24行：makeshadow(total) 函数，total是函数所需参数，用于接收调用者传递来的阴影总数量。该函数拼接 total 个随机位置的阴影的表达字符串，然后去除最后一个逗号（22行）并返回该字符串（23行）。 珠子孝能一生二二生三，，，，小美铝能不能哇{:4_169:} 二楼的那么简单的JS，就能生成那么多阴影啊，太厉害了{:4_199:} 和margin: 200px auto;有关么？如果这个值设小点，会这样？ let num = (min, max) => ，，，的最大最小怎么取值的没看懂{:4_173:} 本帖最后由 马黑黑 于 2022-7-16 11:03 编辑
红影 发表于 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
可简单可复杂，看个人选择编写方式
嗯嗯，你这个非常简洁，厉害{:4_199:} 马黑黑 发表于 2022-7-16 10:57
margin是外边距，只是用它来设置一下元素的位置，挪出更多上下左右的空间用来显示阴影。
嗯嗯，知道了。 马黑黑 发表于 2022-7-16 10:48
这个我解释过一次的。函数的传统写法可能更有助于理解：
function num(min, max) {
是啊，好像打开来，更容易理解呢{:4_173:} 红影 发表于 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
能，生出的样纸吓你一跳
那俺赶紧躲着从门逢缝里瞅{:4_189:}