深入理解 box-shadow
本帖最后由 马黑黑 于 2022-5-12 22:01 编辑 <br /><br /><style>.outer {
width: 100%;
font: normal 16px /23px sans-serif;
}
.outer p { margin: 10px 0; }
.leaf {
width: 100px;
height: 100px;
background: linear-gradient(45deg,green 50%,lightgreen 50%,green 51%);
border-radius: 0% 100%;
box-shadow: 150px 50px 0 0 green;
}
.moon {
border-radius: 50%;
background: none;
box-shadow: 20px 20px 0 0 green;
}
</style>
<div class="outer">
<p>请看如下效果：</p>
<div class="leaf"></div>
<p style="margin-top: 60px;">以上效果，CSS 和 HTML 代码是简单的酱紫：</p>
<pre>css:
<span style="color: red;">.leaf </span>{
<span style="color: blue;">width</span>: 100px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">background</span>: linear-gradient(45deg,green 50%,lightgreen 50%,green 51%);
<span style="color: blue;">border-radius</span>: 0% 100%;
<span style="color: blue;">box-shadow</span>: 150px 50px 0 0 green;
}
html: <span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"leaf"</span>><<span style="color: darkred">/div</span>>
</pre>
<p>可能和你想象的不一样，上述效果只是一个单标签，CSS也没有用上伪标签。请再细看CSS代码，一切奥秘就能明了：右边的“图片”是 box-shadow 营造出来的。</p>
<p>box-shadow 营造元素的阴影，共五个参数：参数一，水平位移位置，例中是 150px，自左往右偏移的距离；参数二，纵向位移位置，例中是 50px，自上往下移动的距离；参数三，模糊系数，例中是0（也可写成0px），表示不模糊；参数四，扩散程度，例中是0（也可写成0px），不扩散；参数五，阴影颜色，例中与元素背景色一样，green。</p>
<p>当水平和垂直方向位移的值设置的很小，box-shadow 会产生元素的阴影，使之具有浮起来的特征，就是立体感。当位移很大，超出元素的原始位置，得出的效果虽然仍是阴影性质，但更像是元素的投影——将元素的主体形状投射到了远处的效果。因为是投射，虽大小、形状保持一致，但细节没法全都弄过去。</p>
<p>是的，阴影就是主体的投射，在指定 {xy} 位置上（第一、二参数）以元素的原始尺寸按指定的模糊系数（第三个参数）、扩展程度（第四个参数）和指定颜色（第五参数）进行投影。通常的 box-shadow 阴影偏移度极少，所以我们感觉不出它实际上是一种投射而是阴影，但这个阴影实际上尺寸是和主体元素一致的，只是阴影的大部分被实体界面挡住了。也许你还记得我介绍过画月亮的简单方法，用的就是这个原理：元素的 radius 属性是50%，主体元素不设置背景颜色，阴影偏移的位置设计成使得阴影整体不超出元素主体，这样露出来的阴影就有一个月牙。我们将 .leaf 选择器的代码改一下：</p>
<pre><span style="color: red;">.leaf </span>{
<span style="color: blue;">width</span>: 100px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">border-radius</span>: 50%;
<span style="color: blue;">box-shadow</span>: 20px 20px 0 0 green;
}
效果如下，绿色的月亮，花潮的世界里才有的瑰宝：</pre>
<div class="leaf moon"></div>
<p><br><br>我们给主体元素加个背景色，一切就会看得清清楚楚了：</p>
<div class="leaf moon" style="background: gold;"></div>
<p><br><br></p>
</div>
所谓的阴影，竟然是多做了一个的叠加，这个倒真没想到呢{:4_187:} “绿色的月亮，花潮的世界里才有的瑰宝：”
通过这个月亮，感受得更清晰了{:4_173:} 用没有颜色的方式，在投射里加上颜色，就能弄出来交叠部分的形状来，这个很考验想象力呢{:4_173:} 红影 发表于 2022-5-12 23:29
用没有颜色的方式，在投射里加上颜色，就能弄出来交叠部分的形状来，这个很考验想象力呢
不设置背景颜色，或设置 background 为 none 或 inherit，表明该盒子使用继承性的背景颜色，亦即其父辈元素中离它最近的、设置有背景色的那个。
唯有当设置元素的背景色设置为 transparent，主体元素才不会遮挡影子 红影 发表于 2022-5-12 23:14
所谓的阴影，竟然是多做了一个的叠加，这个倒真没想到呢
严格来讲不是叠加，设主体的投射产生的影子 红影 发表于 2022-5-12 23:26
“绿色的月亮，花潮的世界里才有的瑰宝：”
通过这个月亮，感受得更清晰了
幽默的功能之一就是强化印象 马黑黑 发表于 2022-5-13 07:40
不设置背景颜色，或设置 background 为 none 或 inherit，表明该盒子使用继承性的背景颜色，亦即其父辈元 ...
哦，对，还有透明可以设置的。 马黑黑 发表于 2022-5-13 07:41
严格来讲不是叠加，设主体的投射产生的影子
以前一直以为是边缘被弄的阴影，原来是投射的结果。 马黑黑 发表于 2022-5-13 07:42
幽默的功能之一就是强化印象
黑黑一直都有着幽默的本领{:4_199:} 红影 发表于 2022-5-13 15:00
黑黑一直都有着幽默的本领
这是与生俱来的：人家出生时是啼哭，我是静默
红影 发表于 2022-5-13 15:00
以前一直以为是边缘被弄的阴影，原来是投射的结果。
绝大多数人都会理解错误，所以我发这帖说道说道 红影 发表于 2022-5-13 14:59
哦，对，还有透明可以设置的。
聪明呀 马黑黑 发表于 2022-5-13 19:11
这是与生俱来的：人家出生时是啼哭，我是静默
别提静默两字，现在这两个字好可怕，所有静默的地方东西都进不来了，要喝西北风了{:4_173:} 马黑黑 发表于 2022-5-13 19:11
绝大多数人都会理解错误，所以我发这帖说道说道
我之前就完全理解错了呢，现在知道了。谢谢黑黑{:4_187:} 马黑黑 发表于 2022-5-13 19:12
聪明呀
哈哈，是你说的，我只是领悟一下，聪明也是你的呀{:4_173:} 红影 发表于 2022-5-14 11:01
哈哈，是你说的，我只是领悟一下，聪明也是你的呀
我智商一般 红影 发表于 2022-5-14 10:59
别提静默两字，现在这两个字好可怕，所有静默的地方东西都进不来了，要喝西北风了
不提了 红影 发表于 2022-5-14 10:59
我之前就完全理解错了呢，现在知道了。谢谢黑黑
不客气 马黑黑 发表于 2022-5-14 12:15
我智商一般
也就是一般的130呗{:4_173:}
页:
[1]
2