【发布时间】：2019-07-26 17:26:30
【问题描述】：
我很难相信没有标准且简单（且独立于浏览器）的方式来使用 CSS 在文本的 外部 周围放置描边效果。
我们确实有-webkit-text-stroke，但出于某种奇怪的原因，笔划以文本的边框为中心，而不是在它之外，如bemoaned here。 p>
所以我正在尝试实现一个基于this idea 的解决方法，它将描边文本放置在原始未描边文本后面的伪元素中。我已经在this jsfiddle 中演示了这一点，代码如下：
var jQueryAttr = function(selector, attr, setterFunction) {
document.querySelectorAll(selector).forEach((el, i) => {
el.setAttribute(attr, setterFunction.call(el, i, attr));
});
};
jQueryAttr('.myclass', 'data-myclass', function(index, attr) {
return this.innerHTML;
});body {
background: none;
}
.basic {
color: rgba(186, 218, 85, 1);
font: 2.5em Georgia, serif;
}
.myclass {
position: relative;
background: transparent;
z-index: 0;
}
.myclass::before {
content: attr(data-myclass);
position: absolute;
-webkit-text-stroke: 0.2em rgba(0, 0, 0, 1);
z-index: -1;
}
.anotherclass {
-webkit-text-stroke: 0.2em rgba(0, 0, 0, 1);
}<p class="basic">Text without any stroke</p>
<p class="myclass basic">Text with outer stroke</p>
<p class="anotherclass basic">Without the trick applied</p>这很好用，除了如果文本本身有一些透明度，那么你会看到下面的黑色笔划，如this variant 所示（唯一的变化是将文本的不透明度重新设置为 0.3）。如您所见，描边元素中的黑色正在渗入文本（在顶行）。
那么有没有另一个巧妙的技巧可以用来解决这个问题？我想可以在描边层和未描边层之间添加另一个伪元素，带有纯白色文本（或与背景匹配的文本），但我想在我 事先不知道背景的颜色...例如它放置在任意用户选择的图像上。为此，我在上面的示例中将body 的background 设置为none。
【问题讨论】：
标签： javascript html css svg