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

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

可能对你有用的技巧是半透明文本（带rgba）和文本阴影的组合，如下所示：

＆＃13;

＆＃13;

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; 
  
  }

＆＃13;

<h1>TEXT</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

维护起来不是很容易，但它可以正常工作

如果您使用此解决方案，为了使维护更容易，可以在元素中的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>