Question

在2019年，没有一种标准且简单（且与浏览器无关）的方法可以使用CSS在文本的外部周围添加笔触效果，这有点奇怪。我们确实有-webkit-text-stroke，但它似乎很依赖浏览器，并且出于某种奇怪的原因，笔画也像bemoaned here一样围绕文本的边框而不是在文本的边框之外。

因此，我试图基于无处不在的text-shadow属性来实现模拟笔触效果，但是即使对于宽笔触（为了避免阴影之间的间隙），也要实现良好的平滑笔触效果，我不仅在使用四个阴影，但很多，如this jsfiddle所示，其代码为：

var element = document.getElementById('random-text');
var strokeWidth = 2.3;
var strokeColor = 'rgba(0,0,0,0.5)';
var strokePart = '';
var increment = 0.1 * 1/strokeWidth;
increment = increment > 0.25 ? 0.25 : increment;
increment = increment * 2*Math.PI;
for (var angle = 0; angle < 2*Math.PI; angle += increment) {
    strokePart = strokePart + (angle > 0 ? ', ' : '') + (Math.cos(angle) * strokeWidth).toFixed(2) + 'px ' + (Math.sin(angle) * strokeWidth).toFixed(2) + 'px 0px ' + strokeColor;
}
style = 'text-shadow: ' + strokePart+ ';';
element.setAttribute('style', style);

这很好用，但因为它是由许多重叠的阴影组成的，所以笔划的最终不透明度基本上是1.0或接近于此。但是我希望笔触的不透明度是一个可设置的变量。

我可以降低每个子阴影（即strokeColor）的不透明度，以便在它们分层时累积累积的不透明度是我想要的，但是我的感觉是，最好让不透明度在{ {1}}（将1.0设置为具有strokeColor的不透明度），然后将其末尾拨至所需的位置。否则，您可能会在中风周围看到间隙和/或不透明度可变。

有没有简单的方法可以做到这一点？

我们可以设置text元素的1.0，但这也会改变文本的不透明度。为了解决这个问题，我们可以创建一个原始文本元素的副本，将其添加到笔划中（具有新的不透明度），然后将原始（未描边的）文本放在顶部，但是如果文本本身是部分透明的，那么您会看到该文本下。也许首先将“描边”层中的文本的不透明度设置为零不透明度？但这一切都变得有点复杂，因为这应该是非常简单的笔触效果！

使用不透明的文本阴影模拟均匀的外部笔划

0 个答案: