一生二二生三

马黑黑

1

2-1

2-2

马黑黑

一楼如果使用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代码：

1. <style>
   
2. .mama { margin: auto; width: 800px; height: 400px; position: relative;}
   
3. .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; }
   
4. .below1 { position: absolute;  top: 50px; -webkit-box-reflect: below 10px; background: tan; }
   
5. .below2 { position: absolute;  top: 160px; -webkit-box-reflect: below 10px; background: olive; }
   
6. </style>

复制代码

由于反射的结果不具备真实元素特性，所以below1 的垂直定位我们拉开了与 wrap 元素的距离，50px，below2 拉开的更大，160px。如果不拉开，它们会几乎重叠在一起。

从HTML结构和CSS样式设定看，其实这是 reflect 套娃的灵活运用： wrap 自己套自己，只是不是一路套下去，而是套了两个并列的自己，同时也不是简单的套，而是所套的自己又有自己的其他行为特征。如果真正用套娃的方式一路套下去会有什么结果？就是一系列的元素和镜像重叠，其应用场景也是存在的，比如展示一些无序化的景象等等。

红影

class="wrap below1" 原来是这样套的，记得你讲过一次，我忘记了

红影

谢谢黑黑，我可以去试试那个频谱了

马黑黑

红影 发表于 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？我去加了一层，无法把它自身镜射出来。

红影

解决了。其实没必要镜射再镜射的呀，我可以直接用向下镜射就完了呀，取消向右的镜射，就倒影出来了呢

红影

修改好的在《不想长大》庆祝六一儿童节
https://www.huachaowang.com/foru ... 60043&fromuid=2
(出处: 花潮论坛)

终于弄出频谱的倒影了，谢谢黑黑

红影

马黑黑 发表于 2022-6-1 07:47
真正的嵌套在HTML结构里，你说的是HTML对CSS多个类选择器的调用。

HTML自我嵌套是酱紫：

一生二二生三道生无穷

梦油

奇妙、奇妙、真奇妙，黑黑制作有妙招。

遗憾，俺没分了，这么好的制作不能加分了。

                 

马黑黑

红影 发表于 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
来学习。

希望不太难