css - CSS浮雕（插图）文本

Question

我试图给我的标题一个漂亮的浮雕外观。它在 Chrome 中运行良好，但 Firefox 退出了。我怎样才能使这种效果在两者中都起作用？这是小提琴：

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>

小提琴玩https://jsfiddle.net/7p15s3nv/5/

在 chrome 和任何其他浏览器（如 IE 或 FF）中并排测试

Answer 2

这是期望的输出吗？

h1{
    font-size: 100px;
    color: rgba(255,255,255,0.4);
    text-shadow: 1px 2px 3px #eee, 0 0 0 #000, 1px 2px 3px #eee;
}

<h1>This is text</h1>

更新

此更新将涵盖问题作者的最后一条评论：

h1 {
    margin-top: 0;
    font-size: 200px;
    color: rgba(255,0,0,0.8);
    text-shadow: 1px 2px 0 #EEE, 0 0 0 #000, 1px 2px 0 #EEE;
}

<h1>This is text</h1>

Answer 3

我认为唯一的解决方案是以伪复制文本。

不是很容易维护，但它可以工作

如果您使用此解决方案，为了更容易维护，可以将文本设置在元素的 attr 中，并将此 attr 用于伪的内容

.demo {
  font-size: 200px;
  color: darkgreen;
  position: relative;
}

.demo:after {
  content: "Hello";
  position: absolute;
  left: 0px;
  top: 0px;
  color: transparent;
  text-shadow: 0px 20px 30px rgba(255, 255, 255, 0.91);
}

<div class="demo">Hello</div>

Answer 4

虽然 background-clip 是一个有效的 CSS3 属性，但文本值是非标准的。这就是为什么它在大多数浏览器中不起作用的原因。

一个可能对您有用的技巧是半透明文本（使用 rgba）和 text-shadow 的组合，如下所示：

h1 { 
 color: rgba(0,0,0, 0.6);
 /* #FFF should be the same as background color of the text */
    text-shadow: 3px 3px 6px #fff, 0 0 0 #666, 3px 3px 6px #fff; 
  
  }

<h1>TEXT</h1>