展示
We all know about the proprietary (and imho, horrible) -webkit-box-reflect. However, you can create just as flexible reflections in Firefox as well, by utilizing -moz-element(), some CSS3 and Firefox's capability to apply SVG effects to HTML elements. And all these are actually standards, so eventually, this will work in all browsers, unlike -webkit-box-reflect, which was never accepted by the CSS WG.
代码
CSS代码：
#content{font-family:'Yanone Kaffeesatz';}
HTML代码：
<select id="select">
<option value="Yanone Kaffeesatz">Yanone Kaffeesatz</option>
<option value="Istok Web">Istok Web</option>
<option value="Bowlby One">Bowlby One</option>
<option value="Modern Antiqua">Modern Antiqua</option>
<option value="Give You Glory">Give You Glory</option>
<option value="Yeseva One">Yeseva One</option>
<option value="Varela Round">Varela Round</option>
<option value="Patrick Hand">Patrick Hand</option>
<option value="Forum">Forum</option>
</select>
JS代码：
var eleLink = $("#fontLink");
$("#select").bind("change", function() {
var href = eleLink.attr("href"), val = $(this).val();
eleLink.attr("href", href.split("=")[0] + "=" + val.replace(/\s/g, "+"));
$("#content").css("fontFamily", val);
});