火狐浏览器下模拟-webkit-box-reflect效果

马黑黑

-webkit-box-reflect 是 chromium 浏览器私有属性，可将源盒子原原本本投射到上、左、下、右四个方向中的一个。在诸如Chrome、夸克、百分、Edge新版等浏览器下，任何一个盒子，它都可以将自己完整投射到四个方向中的任意一个方向，但不可以同时投射超过一个或更多的方向。这个属性很有价值，可惜到目前止，w3c尚未接受，火狐浏览器Firefox也不支持。

Firefox是一款优秀的浏览器，它是没有 box-reflect 属性，但它内置有 element(#id) 私有属性，通过此属性同样可以模拟出 box-reflect 效果。

下面的代码，基于chromium的浏览器均可完美将源盒子完整投射到右边，源盒子和投影之间的距离是20px：

<style>
.mama {
        position: absolute;
        padding: 10px;
        width: 200px;
        height: 120px;
        border: 1px solid tan;
        font: bold 2em sans-serif;
        color: pink;
        text-shadow: 1px 2px 2px #666;
        -webkit-box-reflect: right 20px;
}

</style>

<div class="mama">
    <p>花潮论坛</p>
</div>

但在火狐（Firefox）浏览器下，并没有投影效果，我们需要模拟一样，以使得同一组代码在chromium和Firefox下达到相同的效果。前面提到，Firefox 有一个 element(#id) 私有属性，它是用来“克隆”源盒子外貌的，通过另一个盒子的 background 属性实现：

background: -moz-element(#id名称) no-repeat;

-moz- 是 Firefox 在CSS中使用其私有属性的固定前缀，element 是元素，括号里是该元素的 id  在 CSS 中的名称，也可以只是 div 的 id 名称。例如，有一个 div，其 id="mama"，则我们可以在另一个盒子 girl 中用 background 的方式“克隆” mama 表面上的一切：

.girl {
        position: absolute;
        width: 222px;
        height: 142px;
        left: 240px;
        background: -moz-element(#mama) no-repeat;
        transform: scale(-1,1);
}


核心部分就是 background 的 -moz-element(#mama) 这个私有属性，是它“克隆”了mama的外观；而 transform: scale(-1,1) 是让投影的镜像水平方向与源盒子反向，因为放在右边，所以垂直方向不改变。其余的宽高、左边值的定义，是基于 mama 的 CSS设定，padding和border都计算在里面，才能模仿出和 chromium 的 -webkit-box-reflect 产生的结果。

应该特别注意的是，transform: scale(x,y) 的应用是镜像反向的关键，如何反向取决于投射的方向，(x,y)的值在 1 和 -1 之间变换即可。

马黑黑

花潮论坛

马黑黑

二楼，Firefox和chromium 应显示相同的效果，本地测试通过，但在此论坛有问题

小辣椒

可以回帖了啊，刚才就一直不敢回，怕还继续的。。。

小辣椒

这个小辣椒是真的不会，就等欣赏黑黑的精彩呈现

红影

也就是说，火狐的话不但要用element(#id) ，还设置另外的位置，而且要用transform: scale(-1,1)，真够麻烦的。

马黑黑

红影 发表于 2022-12-3 21:57
也就是说，火狐的话不但要用element(#id) ，还设置另外的位置，而且要用transform: scale(-1,1)，真够麻烦 ...

很麻烦，还不一定好，毕竟是私有属性。正在考虑不用 box-reflect 做那个播放器，思路有了，算法也有了

红影

马黑黑 发表于 2022-12-3 22:26
很麻烦，还不一定好，毕竟是私有属性。正在考虑不用 box-reflect 做那个播放器，思路有了，算法也有了

哦哦，黑黑又在琢磨好东西啊，真赞

马黑黑

红影 发表于 2022-12-3 23:08
哦哦，黑黑又在琢磨好东西啊，真赞

出来了，这个，除IE外，不应存在兼容问题了：

https://www.huachaowang.com/foru ... p;extra=#pid1792908

红影

马黑黑 发表于 2022-12-4 08:29
出来了，这个，除IE外，不应存在兼容问题了：

https://www.huachaowang.com/forum.php?mod=viewthread ...

黑黑太赞了

马黑黑

红影 发表于 2022-12-4 10:07
黑黑太赞了

一般般

梦缘

谢谢老师的精彩分享，问好！

红影

马黑黑 发表于 2022-12-4 10:10
一般般

不过那个反射是完全左右同步，现在的少许两边不完全对称，但错落着更美
这也可以做成柱状的吧。

马黑黑

红影 发表于 2022-12-4 10:32
不过那个反射是完全左右同步，现在的少许两边不完全对称，但错落着更美
这也可以做成柱状的吧 ...

这个不是错落美的问题。按理，每一个元素代表声音中不同的音源信息

马黑黑

梦缘 发表于 2022-12-4 10:18
谢谢老师的精彩分享，问好！

红影

马黑黑 发表于 2022-12-4 10:58
这个不是错落美的问题。按理，每一个元素代表声音中不同的音源信息

原来是这样，这种对应真神奇啊

马黑黑

红影 发表于 2022-12-4 13:57
原来是这样，这种对应真神奇啊

一点也不神奇。声音，有各种信息，我们容易识别的是声音的高低，其实就算只比划高低，还有许多可以分解，分解出来的信息，自然可以以视觉的形式反映出来。

红影

马黑黑 发表于 2022-12-4 14:45
一点也不神奇。声音，有各种信息，我们容易识别的是声音的高低，其实就算只比划高低，还有许多可以分解， ...

能分解出声音信息，本身就很神奇，分解后还要用视觉形式表现出来，不会代码的话，也不容易。这么不容易的事，也就你说不神奇

马黑黑

红影 发表于 2022-12-4 17:16
能分解出声音信息，本身就很神奇，分解后还要用视觉形式表现出来，不会代码的话，也不容易。这么不容易的 ...

主要是，不会原理和代码的话，好比不喝酒、撩妹的男人，是无法将二者（酒与色或音与色）联系在一起的

红影

马黑黑 发表于 2022-12-4 17:30
主要是，不会原理和代码的话，好比不喝酒、撩妹的男人，是无法将二者（酒与色或音与色）联系在一起的

你这举例也太奇葩了点