【问题标题】：CSS Embossed (Inset) TextCSS浮雕（插图）文本
【发布时间】：2016-02-08 01:05:49
【问题描述】：

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

还有我的 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;
}

感谢您的帮助。

【问题讨论】：

貌似text是webkit实现的非标准值：developer.mozilla.org/en-US/docs/Web/CSS/…
检查一下jsfiddle.net/NeqCC，我在 Firefox、Chrome 和 IE11 中测试过，结果都一样
这是对上述小提琴的修改，以模仿您的文字jsfiddle.net/h60n539t
看起来每个都指向同一个技术；），应该不会那么糟糕吧？
@GCyrillus 我无法理解我的答案拒绝投票的原因！

标签： css firefox emboss

【解决方案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）中并排测试

【讨论】：

关闭，但如果您放大很多，您会发现您的建议没有任何阴影。我一直在寻找一种让我的代码在 Firefox 中运行的方法。
@GTSJoe 好吧，您正在使用的东西在 FF 或 IE 中不可用（还没有？），您必须寻找一种在 webkit 实验效果不可用的情况下很好的替代方案。 ......................对于阴影，我不知道您是否可以完全一样，您需要调整阴影，添加一些模糊或使用一个或几个来重绘您想要的效果。我的回答指出了一种更有效的跨浏览器技术，这不是现成的工作，但足够接近以引起人们的注意。我希望你有更好的选择，我很乐意学习。

【解决方案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;
}

&lt;h1&gt;This is text&lt;/h1&gt;

更新

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

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

&lt;h1&gt;This is text&lt;/h1&gt;

【讨论】：

不，应该没有背景色。所需的输出是它在 Chrome 中的外观，而不是 Firefox。
这只是一个投影。我想要的效果是嵌入文字，如浮雕文字。
@GTSJoe 这不是想要的输出吗？
Trix，我确实尝试了您的建议，并且您的配色方案看起来确实不错，但我注意到如果您更改颜色，那么它看起来很不一样。例如，请参阅此小提琴：jsfiddle.net/7p15s3nv/7 更改颜色不会产生所需的输出。我需要一种适用于所有颜色的方法。
@GTSJoe 如果您想要其他颜色，您可以更改颜色，而不是阴影。试试我的 UPDATE 一个红色的

【解决方案3】：

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

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

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

&lt;h1&gt;TEXT&lt;/h1&gt;

【讨论】：

【解决方案4】：

我认为唯一的解决办法是复制一个伪文本。

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

如果你使用这个解决方案，为了更容易维护，可以在元素的一个属性中设置文本，并将这个属性用于伪的内容

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

&lt;div class="demo"&gt;Hello&lt;/div&gt;

【讨论】：