一生二二生三
<style>.mama { margin: auto; width: 740px; height: 400px; position: relative;}
.wrap { position: relative; top: 100px; width: 200px; height: 40px; text-align: center; font: normal 16px / 40px sans-serif; -webkit-box-reflect: right 10px; border: 1px solid; }
.below1 { position: absolute;top: 50px; -webkit-box-reflect: below 10px; background: tan; }
.below2 { position: absolute;top: 160px; -webkit-box-reflect: below 10px; background: olive; }
</style>
<div class="mama">
<div class="wrap">1
<div class="wrap below1">2-1</div>
<div class="wrap below2">2-2</div>
</div>
</div>
本帖最后由 马黑黑 于 2022-6-1 07:28 编辑
一楼如果使用webkit内核的浏览器查看，会看到很奇妙的效果，有点h5知识的一眼就看得出来，这是用了 webkit-box-reflect 的缘故，将元素镜像反射复制了。
但这不是简单的反射，是多重嵌套反射。HTML结构如下：
<div class="mama">
<div class="wrap">1
<div class="wrap below1">2-1</div>
<div class="wrap below2">2-2</div>
</div>
</div>
mama是外框，不多说。其子层 wrap 使用了一个向右的反射，然后套两个并列的 wrap 。当然，不是简单的套，它们又各自引用不同的选择器 below1 和 below2，二者的选择器都使用了一个向下的反射。
来看看完整的CSS代码：
<style>
.mama { margin: auto; width: 800px; height: 400px; position: relative;}
.wrap { position: relative; top: 100px; width: 200px; height: 40px; text-align: center; font: normal 16px / 40px sans-serif; -webkit-box-reflect: right 10px; border: 1px solid; }
.below1 { position: absolute;top: 50px; -webkit-box-reflect: below 10px; background: tan; }
.below2 { position: absolute;top: 160px; -webkit-box-reflect: below 10px; background: olive; }
</style>由于反射的结果不具备真实元素特性，所以below1 的垂直定位我们拉开了与 wrap 元素的距离，50px，below2 拉开的更大，160px。如果不拉开，它们会几乎重叠在一起。
从HTML结构和CSS样式设定看，其实这是 reflect 套娃的灵活运用： wrap 自己套自己，只是不是一路套下去，而是套了两个并列的自己，同时也不是简单的套，而是所套的自己又有自己的其他行为特征。如果真正用套娃的方式一路套下去会有什么结果？就是一系列的元素和镜像重叠，其应用场景也是存在的，比如展示一些无序化的景象等等。
class="wrap below1" 原来是这样套的，记得你讲过一次，我忘记了{:4_173:} 谢谢黑黑，我可以去试试那个频谱了{:4_199:} 红影 发表于 2022-6-1 07:44
class="wrap below1" 原来是这样套的，记得你讲过一次，我忘记了
真正的嵌套在HTML结构里，你说的是HTML对CSS多个类选择器的调用。
HTML自我嵌套是酱紫：
<div calss="wrap">1
<div calss="wrap">2
<div calss="wrap">3
<div calss="wrap">4</div>
</div>
</div>
</div>
这是四层嵌套。 红影 发表于 2022-6-1 07:45
谢谢黑黑，我可以去试试那个频谱了
我没有试过，但凭我的理解，是可以的，就嵌套一层，被嵌套的无需并列子层 马黑黑 发表于 2022-6-1 07:49
我没有试过，但凭我的理解，是可以的，就嵌套一层，被嵌套的无需并列子层
还是不行，可能里面有span？我去加了一层，无法把它自身镜射出来。 解决了。其实没必要镜射再镜射的呀，我可以直接用向下镜射就完了呀，取消向右的镜射，就倒影出来了呢{:4_173:} 修改好的在《不想长大》庆祝六一儿童节
https://www.huachaowang.com/forum.php?mod=viewthread&tid=60043&fromuid=2
(出处: 花潮论坛)
终于弄出频谱的倒影了，谢谢黑黑{:4_187:} 马黑黑 发表于 2022-6-1 07:47
真正的嵌套在HTML结构里，你说的是HTML对CSS多个类选择器的调用。
HTML自我嵌套是酱紫：
一生二二生三道生无穷{:4_173:} 奇妙、奇妙、真奇妙，黑黑制作有妙招。
遗憾，俺没分了，这么好的制作不能加分了。
{:4_201:} 红影 发表于 2022-6-1 08:37
一生二二生三道生无穷
也许你说的有道理 梦油 发表于 2022-6-1 10:06
奇妙、奇妙、真奇妙，黑黑制作有妙招。
遗憾，俺没分了，这么好的制作不能加分了。
分不分木有关系 红影 发表于 2022-6-1 08:03
还是不行，可能里面有span？我去加了一层，无法把它自身镜射出来。
和span没有关系吧 红影 发表于 2022-6-1 08:28
解决了。其实没必要镜射再镜射的呀，我可以直接用向下镜射就完了呀，取消向右的镜射，就倒影出来了呢{:4_17 ...
这是最便捷的方法。然后柱子数量可以增加。 红影 发表于 2022-6-1 08:34
修改好的在《不想长大》庆祝六一儿童节
https://www.huachaowang.com/forum.php?mod=viewthread&tid=60043 ...
有个倒影挺漂亮的。倒影也设置的挺好。 马黑黑 发表于 2022-6-1 12:14
分不分木有关系
谢谢黑黑朋友的理解。祝你和你的家人节日快乐。 来学习。 梦油 发表于 2022-6-1 16:01
谢谢黑黑朋友的理解。祝你和你的家人节日快乐。
同祝同祝 加林森 发表于 2022-6-1 17:27
来学习。
希望不太难