CSS 浮雕(插图)文本

Question

我正在努力使我的标题具有漂亮的浮雕外观。它在 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;
}

感谢您的帮助。

Answer 1

也许没有背景剪辑，但更“经典”的方法？

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)中并排测试