javascript - CSS/Javascript - 使用 css3 或 javascript 复制图像样式(贴纸样式)

Question

嗨，有人可以给我一些关于如何将您看到的图像复制为纯 CSS 字体+样式的建议吗？

我尝试了这个:JSFIDDLECSS

 *{
        font-family: 'Asap', sans-serif;
        font-size:130px;
        color:#444;
        font-weight:bold;
        letter-spacing:-3px;
    }
    body{
        background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
    }
    img{
        width:auto;
        height:auto;
    }
    a{

        text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff,
            0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
    }

html

<a>asd</a>

任何建议均适用。

如果您还认为不可能复制此内容，请告诉我，因为如果不可能，我会在上面浪费时间，并且我将使用图像而不是纯 css。注意:对于文本渐变颜色，我知道 css 是不可能的，所以我计划使用这样的东西:https://github.com/mrnix/pxgradient

但对我来说最大的问题是使文本阴影显示为图像中的样子谢谢!

Answer 1

我将你的文本阴影更改为:

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

它仅适用于支持文本阴影扩展的浏览器(据我所知只是 IE10)，但它与图像中的效果更接近。

不幸的是，不可能在文本颜色中获得从浅蓝色到略深蓝色的渐变，因此您必须选择最适合您的纯色。

当然，对于跨浏览器兼容的解决方案，图像是最好的选择。