Html 如何防止文字阴影与上一行文字重叠

是否可以防止

文本阴影

在同一元素内重叠文本（例如

h1

）？请看下面一个夸张的示例图像——在我的用例中，我希望文本是非常明亮的白色，但是阴影与之重叠，导致灰色区域模糊

我在这里制作了一个简化的测试用例来演示：

---

注意：我特意使用了一个小的

行高度

来突出这个问题

您可以尝试以下方法：

h1 { 
   text-shadow: 0 0 2px white, 0 0 10px grey, 0 0 4px black; 
}

---

您可以有无限数量的文本阴影。因此，先放一个白色的，可能有助于清除灰色/黑色。调整像素等，让它按你想要的方式工作。

据我所知，你不能

---

尽量使用较小的阴影或使文本

行高

更大。

我认为您必须使

行高

更大，例如

行高：1.3em 
 可以考虑将另一层文本置于阴影文本之上：


<div class="cover">
     <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eveniet eos deleniti provident ab nam laborum at voluptatem est iste ratione quis error perspiciatis debitis.</a></h1>

</div>

.cover{
 position:absolute; 
 top:0;
}
.cover h1 a{
 color: white;
}

$(function () {
    $('.wrapper').children().clone().css({
        position: 'absolute'
    }).prependTo('body');
});

使用伪元素


首先，将内容重复到元素的属性中：

<div class="text-shadow" data-content="This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.">This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.</div>

我应该补充一点，我故意使用了一个小的
行高度来突出这个问题！看起来像只虫子。如果向下设置，它不会重叠。我只看到了可能性，复制元素，将复制的元素设置为透明字体、阴影集和较低的z索引。谢谢你的回答。请看我在上面原始问题下的评论——忘记提到
行高了。
。谢谢你的回答。请看我在上面原始问题下的评论——忘记提到
行高了。谢谢。从理论上讲，这听起来应该行得通。我会做实验，然后回来汇报。哇，这真是太棒了！
.text-shadow {
    position: relative;
    text-shadow: 0 -.5em 1em black;
    color: transparent;

    &:after {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: none;
    }
}