如何防止文本阴影重叠前一行的文本

Question

是否可以防止text-shadow同一元素内的文本重叠(例如a h1)？请看下面一个夸张的示例图片 - 在我的用例中我希望文本非常明亮的白色,但是阴影重叠并导致模糊的灰色区域.

我在这里做了一个简化的测试用例来演示:http://codepen.io/approach/pen/LgaIe

注意:我故意用一个小的line-height来突出这个问题

Answer 1

您可以考虑在阴影文本上方放置另一层文本:

基本工作实例

<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;
}

或者节省一点时间并输入:

jQuery工作示例

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

Answer 2

你可以尝试这样的事情：

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

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