制作浮雕文字答案

【问题标题】：make embossed text制作浮雕文字
【发布时间】：2012-05-04 06:43:07
【问题描述】：

我发现这个solution 用于制作带有文字的浮雕效果。这真的是最好的方法吗。任何关于它的新想法。如果您必须添加额外的跨度标签来获得正确的字距调整，它就无法使用。我猜它添加了额外的节点并弄乱了伪选择器。

【问题讨论】：

标签： css

【解决方案1】：

你可以使用文字阴影。

text-shadow{0px 1px 0px #fff, 0px -1px 0px #000}

这在 IE 9 之前的任何东西中都不起作用。

【讨论】：

兼容性没问题。但是文字阴影看起来真的只是有阴影。它正在寻找一个嵌入的阴影。让它看起来像是刻在页面上的
你可以看到caniuse.com/#search=text-shadow的兼容性和资源链接和在线模拟器（编辑没有像box-shadow那样的插入关键字）
您可以调整颜色，使其与您的配色方案相似。
我找到了[this] (gordonhallart.com/blog/2011/04/27/…)，基本上就是我想要的效果，但是在右下角你可以看到从文字中延伸出来的模糊阴影。
文本阴影：0px 1px 0px rgba(0,0,0,0.3), 0px -1px 0px rgba(255,255,255,0.3);

【解决方案2】：

它不一定是跨浏览器友好的，但总有文本阴影来模拟浮雕样式。

h1.embossed {
    text-shadow: 1px 1px 2px #fff;
}

【讨论】：