请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-5-12 22:01 编辑
请看如下效果：
以上效果，CSS 和 HTML 代码是简单的酱紫：
css:
.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;
}
html: div class="leaf"></div>
可能和你想象的不一样，上述效果只是一个单标签，CSS也没有用上伪标签。请再细看CSS代码，一切奥秘就能明了：右边的“图片”是 box-shadow 营造出来的。
box-shadow 营造元素的阴影，共五个参数：参数一，水平位移位置，例中是 150px，自左往右偏移的距离；参数二，纵向位移位置，例中是 50px，自上往下移动的距离；参数三，模糊系数，例中是0（也可写成0px），表示不模糊；参数四，扩散程度，例中是0（也可写成0px），不扩散；参数五，阴影颜色，例中与元素背景色一样，green。
当水平和垂直方向位移的值设置的很小，box-shadow 会产生元素的阴影，使之具有浮起来的特征，就是立体感。当位移很大，超出元素的原始位置，得出的效果虽然仍是阴影性质，但更像是元素的投影——将元素的主体形状投射到了远处的效果。因为是投射，虽大小、形状保持一致，但细节没法全都弄过去。
是的，阴影就是主体的投射，在指定 {xy} 位置上（第一、二参数）以元素的原始尺寸按指定的模糊系数（第三个参数）、扩展程度（第四个参数）和指定颜色（第五参数）进行投影。通常的 box-shadow 阴影偏移度极少，所以我们感觉不出它实际上是一种投射而是阴影，但这个阴影实际上尺寸是和主体元素一致的，只是阴影的大部分被实体界面挡住了。也许你还记得我介绍过画月亮的简单方法，用的就是这个原理：元素的 radius 属性是50%，主体元素不设置背景颜色，阴影偏移的位置设计成使得阴影整体不超出元素主体，这样露出来的阴影就有一个月牙。我们将 .leaf 选择器的代码改一下：
.leaf {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 20px 0 0 green;
}
效果如下，绿色的月亮，花潮的世界里才有的瑰宝：
我们给主体元素加个背景色，一切就会看得清清楚楚了：
| 
发表于 2022-5-12 21:57
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主