通过实例理解阴影的尺寸
本帖最后由 马黑黑 于 2023-8-13 20:45 编辑 <br /><br /><style>#mbox {
margin-top 50px;
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;
}
.hcode { margin: 10px 0; padding: 12px; tab-size: 4; background: rgba(200,200,200,.15); }
.papa p { padding: 10px 0; }
</style>
<div id="papa" style="margin-top: 20px">
<div id="mbox"></div>
<p>上面，粉红色的盒子是元素自身，其余四个矩形都是它的阴影。以上效果的代码如下：</p>
<pre class="hcode"><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></pre>
<p>阴影的第四个参数是可选参数，它指定阴影尺寸，为 0 或缺省时，表示阴影和元素大小一致，上例第一个阴影，即紫色的那个，阴影尺寸为 0，其大小和元素一样；第二个阴影，尺寸为 10px，其宽高就会比元素自身大 20 px，即左、右、上、下各 10 px；阴影支持负数值，第三个阴影即品红色的那个矩形就是，-10px 表示该阴影的尺寸为元素的宽高减去 20px，就酱。</p>
</div>
-10就是各边减10，这个十分直观。。 黑黑新的知识点，小辣椒都漏下了{:4_203:} 小辣椒 发表于 2023-8-13 21:18
黑黑新的知识点，小辣椒都漏下了
这个简单的，一看就会 花飞飞 发表于 2023-8-13 21:01
-10就是各边减10，这个十分直观。。
有例子就直观 马黑黑 发表于 2023-8-13 21:18
有例子就直观
习惯看图文结合。。 这个还可以单独弄出阴影的图案来，很神奇。想起以前的月亮就是这么弄出来的吧。 当数值足够大，就跑出去自立门户了。以前只关注第三个的模糊，原来第四个数字还有这么大作用呢。
单独讲其中的一样，这个法子好，可以更好地记住了{:4_187:} 红影 发表于 2023-8-13 21:25
当数值足够大，就跑出去自立门户了。以前只关注第三个的模糊，原来第四个数字还有这么大作用呢。
单独讲其 ...
第四个参数因为是可选，不用到是一般都不理它 花飞飞 发表于 2023-8-13 21:20
习惯看图文结合。。
右脑发达的说 马黑黑 发表于 2023-8-13 21:43
右脑发达的说
这个不清楚哪边在工作。。{:4_170:} 花飞飞 发表于 2023-8-13 21:57
这个不清楚哪边在工作。。
不知不觉最好 红影 发表于 2023-8-13 21:23
这个还可以单独弄出阴影的图案来，很神奇。想起以前的月亮就是这么弄出来的吧。
对，弯月是利用圆形主元素遮挡阴影，或说，阴影未完全脱离主元素而呈现出弯月。 马黑黑 发表于 2023-8-13 21:42
第四个参数因为是可选，不用到是一般都不理它
现在彻底感受到它的力量了{:4_187:} 马黑黑 发表于 2023-8-13 22:35
对，弯月是利用圆形主元素遮挡阴影，或说，阴影未完全脱离主元素而呈现出弯月。
嗯嗯，至少那时已经感受到了。 红影 发表于 2023-8-13 23:55
嗯嗯，至少那时已经感受到了。
自己做过比较的话，会更清晰 红影 发表于 2023-8-13 23:52
现在彻底感受到它的力量了
挺好 马黑黑 发表于 2023-8-13 22:21
不知不觉最好
都狂风暴雨地动天摇了，不知不觉太难。。{:4_170:} 花飞飞 发表于 2023-8-14 09:03
都狂风暴雨地动天摇了，不知不觉太难。。
难是一个挑战而已 马黑黑 发表于 2023-8-14 12:13
难是一个挑战而已
不是战斗民族。。{:4_173:}你没签到