通过实例理解阴影的尺寸

马黑黑

上面，粉红色的盒子是元素自身，其余四个矩形都是它的阴影。以上效果的代码如下：

<style>
	#mbox {
		margin-bottom: 80px;
		width: 50px;
		height: 50px;
		background: pink;
		box-shadow: 
			60px 0 0 0 purple,
			130px 0 0 10px red,
			0 60px 0 -10px magenta;
	}
</style>

<div id="mbox"></div>

阴影的第四个参数是可选参数，它指定阴影尺寸，为 0 或缺省时，表示阴影和元素大小一致，上例第一个阴影，即紫色的那个，阴影尺寸为 0，其大小和元素一样；第二个阴影，尺寸为 10px，其宽高就会比元素自身大 20 px，即左、右、上、下各 10 px；阴影支持负数值，第三个阴影即品红色的那个矩形就是，-10px 表示该阴影的尺寸为元素的宽高减去 20px，就酱。

花飞飞

-10就是各边减10，这个十分直观。。

小辣椒

黑黑新的知识点，小辣椒都漏下了

马黑黑

小辣椒 发表于 2023-8-13 21:18
黑黑新的知识点，小辣椒都漏下了

这个简单的，一看就会

马黑黑

花飞飞 发表于 2023-8-13 21:01
-10就是各边减10，这个十分直观。。

有例子就直观

花飞飞

马黑黑 发表于 2023-8-13 21:18
有例子就直观

习惯看图文结合。。

红影

这个还可以单独弄出阴影的图案来，很神奇。想起以前的月亮就是这么弄出来的吧。

红影

当数值足够大，就跑出去自立门户了。以前只关注第三个的模糊，原来第四个数字还有这么大作用呢。
单独讲其中的一样，这个法子好，可以更好地记住了

马黑黑

红影 发表于 2023-8-13 21:25
当数值足够大，就跑出去自立门户了。以前只关注第三个的模糊，原来第四个数字还有这么大作用呢。
单独讲其 ...

第四个参数因为是可选，不用到是一般都不理它

马黑黑

花飞飞 发表于 2023-8-13 21:20
习惯看图文结合。。

右脑发达的说

花飞飞

马黑黑 发表于 2023-8-13 21:43
右脑发达的说

这个不清楚哪边在工作。。

马黑黑

花飞飞 发表于 2023-8-13 21:57
这个不清楚哪边在工作。。

不知不觉最好

马黑黑

红影 发表于 2023-8-13 21:23
这个还可以单独弄出阴影的图案来，很神奇。想起以前的月亮就是这么弄出来的吧。

对，弯月是利用圆形主元素遮挡阴影，或说，阴影未完全脱离主元素而呈现出弯月。

红影

马黑黑 发表于 2023-8-13 21:42
第四个参数因为是可选，不用到是一般都不理它

现在彻底感受到它的力量了

红影

马黑黑 发表于 2023-8-13 22:35
对，弯月是利用圆形主元素遮挡阴影，或说，阴影未完全脱离主元素而呈现出弯月。

嗯嗯，至少那时已经感受到了。

马黑黑

红影 发表于 2023-8-13 23:55
嗯嗯，至少那时已经感受到了。

自己做过比较的话，会更清晰

马黑黑

红影 发表于 2023-8-13 23:52
现在彻底感受到它的力量了

挺好

花飞飞

马黑黑 发表于 2023-8-13 22:21
不知不觉最好

都狂风暴雨地动天摇了，不知不觉太难。。

马黑黑

花飞飞 发表于 2023-8-14 09:03
都狂风暴雨地动天摇了，不知不觉太难。。

难是一个挑战而已

花飞飞

马黑黑 发表于 2023-8-14 12:13
难是一个挑战而已

不是战斗民族。。你没签到