3

我想对我的标题文本应用 3px 笔画，以使其与我网站其余部分的设计保持一致。出于两个原因，我也更愿意不使用图像：可维护性和开销。

我知道我可以使用该text-stroke属性，但它似乎没有广泛的浏览器支持：http ://caniuse.com/text-stroke

我知道的另一种方法是text-shadow这样使用的：

text-shadow: -3px -3px 0 #d3d3d3, 3px -3px 0 #d3d3d3, -3px 3px 0 #d3d3d3, 3px 3px 0 #d3d3d3;

但是，该方法不会导致字形周围出现实线，正如您在此 jsfiddle 中看到的那样：http: //jsfiddle.net/mdcwy/

有没有一种可靠的方法可以在文本周围添加一个看起来像样的 3px 笔画，而且开销很小？我不介意使用 JavaScript/jQuery 库，但我宁愿不使用图像。

4

2 回答 2

2

您可以使用 JS 生成您的text-shadow：

var el = document.getElementById('foo'),
    shadow = '',
    width = 10,
    color = '#d3d3d3';
for(var i=-width; i<=width; ++i) {
    shadow += ', '+i+'px '+width+'px 0 '+color
        + ', '+i+'px '+-width+'px 0 '+color
        + ', '+width+'px '+i+'px 0 '+color
        + ', '+-width+'px '+i+'px 0 '+color;
}
el.style.textShadow = shadow.substring(2);

演示

于 2013-10-20T01:36:42.270 回答
0

这只是在您四处走动并使用更多步骤时抵消阴影的问题。

text-shadow: -1px -3px 0 #d3d3d3, 1px -3px 0 #d3d3d3, 
             -1px 3px 0 #d3d3d3, 1px 3px 0 #d3d3d3, 
             -3px -1px 0 #d3d3d3, 3px -1px 0 #d3d3d3,
             -3px 1px 0 #d3d3d3, 3px 1px 0 #d3d3d3, 
             -3px -3px 0 #d3d3d3, 3px -3px 0 #d3d3d3, 
             -3px 3px 0 #d3d3d3, 3px 3px 0 #d3d3d3;

jsfiddle.net/mdcwy/35/

于 2013-10-20T01:31:38.207 回答