我正在努力使我的标题具有漂亮的浮雕外观。它在 Chrome 中运行良好,但 Firefox 退出了。我怎样才能使这种效果在两者中都起作用?这是 fiddle :
https://jsfiddle.net/7p15s3nv/
还有我的 CSS:
h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
感谢您的帮助。
最佳答案
也许没有背景剪辑,但更“经典”的方法?
h1:first-of-type {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
h1+h1 {
color: rgba(255,255,255,0.4);
text-shadow: 0 -2px rgba(0,0,0,0.6);
}
<h1>Hello there! webkit</h1>
<h1>Hello there! FF ?</h1>
fiddle 玩https://jsfiddle.net/7p15s3nv/5/
在 chrome 和任何其他浏览器(如 IE 或 FF)中并排测试
关于CSS 浮雕(插图)文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35247529/