火狐浏览器下模拟-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 之间变换即可。
本帖最后由 马黑黑 于 2022-12-3 20:12 编辑 <br /><br /><style>
#mama1 {
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;
}
#girl1 {
position: absolute;
width: 222px;
height: 142px;
left: 240px;
background: -moz-element(#mama) no-repeat;
-moz-transform: scale(-1,1);
}
</style>
<div style="position: relative;width: 100%; height: 300px;">
<div id="mama1">花潮论坛</div>
<div id="girl1"></div>
</div> 本帖最后由 马黑黑 于 2022-12-3 20:13 编辑
二楼，Firefox和chromium 应显示相同的效果，本地测试通过，但在此论坛有问题
可以回帖了啊，刚才就一直不敢回，怕还继续的。。。{:4_170:} 这个小辣椒是真的不会，就等欣赏黑黑的精彩呈现{:4_178:} 也就是说，火狐的话不但要用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 做那个播放器，思路有了，算法也有了
哦哦，黑黑又在琢磨好东西啊，真赞{:4_187:} 红影 发表于 2022-12-3 23:08
哦哦，黑黑又在琢磨好东西啊，真赞
出来了，这个，除IE外，不应存在兼容问题了：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=65043&page=1&extra=#pid1792908 马黑黑 发表于 2022-12-4 08:29
出来了，这个，除IE外，不应存在兼容问题了：
https://www.huachaowang.com/forum.php?mod=viewthread ...
黑黑太赞了{:4_199:} 红影 发表于 2022-12-4 10:07
黑黑太赞了
一般般 谢谢老师的精彩分享，问好！{:4_187:} 马黑黑 发表于 2022-12-4 10:10
一般般
不过那个反射是完全左右同步，现在的少许两边不完全对称，但错落着更美{:4_187:}
这也可以做成柱状的吧。 红影 发表于 2022-12-4 10:32
不过那个反射是完全左右同步，现在的少许两边不完全对称，但错落着更美
这也可以做成柱状的吧 ...
这个不是错落美的问题。按理，每一个元素代表声音中不同的音源信息 梦缘 发表于 2022-12-4 10:18
谢谢老师的精彩分享，问好！
{:4_190:} 马黑黑 发表于 2022-12-4 10:58
这个不是错落美的问题。按理，每一个元素代表声音中不同的音源信息
原来是这样，这种对应真神奇啊{:4_187:} 红影 发表于 2022-12-4 13:57
原来是这样，这种对应真神奇啊
一点也不神奇。声音，有各种信息，我们容易识别的是声音的高低，其实就算只比划高低，还有许多可以分解，分解出来的信息，自然可以以视觉的形式反映出来。 马黑黑 发表于 2022-12-4 14:45
一点也不神奇。声音，有各种信息，我们容易识别的是声音的高低，其实就算只比划高低，还有许多可以分解， ...
能分解出声音信息，本身就很神奇，分解后还要用视觉形式表现出来，不会代码的话，也不容易。这么不容易的事，也就你说不神奇{:4_173:} 红影 发表于 2022-12-4 17:16
能分解出声音信息，本身就很神奇，分解后还要用视觉形式表现出来，不会代码的话，也不容易。这么不容易的 ...
主要是，不会原理和代码的话，好比不喝酒、撩妹的男人，是无法将二者（酒与色或音与色）联系在一起的 马黑黑 发表于 2022-12-4 17:30
主要是，不会原理和代码的话，好比不喝酒、撩妹的男人，是无法将二者（酒与色或音与色）联系在一起的
你这举例也太奇葩了点{:4_170:}