执行文本反射+渐变的跨浏览器替代方法（如-webkit-box-reflect）答案

【问题标题】：Cross-browser alternative method of performing text reflection + gradient (like -webkit-box-reflect)执行文本反射+渐变的跨浏览器替代方法（如-webkit-box-reflect）
【发布时间】：2011-12-25 19:57:17
【问题描述】：

我也想在其他浏览器中实现 -webkit-box-reflect 的效果（即应用渐变的镜像文本）。例如。

.textreflection {
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4))); 
 }

我对服务器端（PHP，即很乐意在服务器端生成图像以替换文本）和客户端（Javascript - jQuery）解决方案持开放态度。

我尝试了几个 jQuery 插件，但它们要么看起来不正确，要么不能在所有字体大小下正常工作（FontEffect 和 jquery.textreflection）。

请教我如何以优雅的跨浏览器方式实现此效果？

PS。如果有人知道我可以记住以供将来参考的任何 HTML5/Canvas 解决方案，我也很感兴趣（在这种情况下我不能使用它，但无论如何我想看看）

【问题讨论】：

标签： php jquery image-processing typography

【解决方案1】：

这里有一些适用于图像的解决方案，但我没有测试过文本：

【讨论】：

将查看并评估它们...谢谢。