透视/看不见的白色文字阴影

Question

我在DOM中有一个html元素;

<h5 class="white-shadow"> Basic </h5> 

附加了以下css规则;

.white-shadow{
    text-shadow: -1px 0px 5px #ffffff; 
}

h5位于具有灰色背景的列表元素中。我们的想法是添加白色文本阴影以提高可读性。奇怪的是，我看不到任何结果。

这就是我在浏览器中看到的内容;

这是devtools向我展示的内容;

但如果我将背景颜色从白色变为红色，我就能看到变化。

这就是我在浏览器中看到的内容;

这是devtools向我展示的内容;

我没有触及文本影子规则的alpha参数。由于某种原因，红色文本阴影颜色是可见的，而白色文本颜色不是。

我正在使用bootstrap3，虽然我不认为它会阻止任何地方的白色文字阴影。

为什么我看不到文字周围的白色阴影？我该怎么办呢？

Answer 1

DOM中有阴影，但由于你的background-color，它并不是很明显 see here

我的建议是，更改shadow color或background-color

here is what you want

使用

.white-shadow{
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

从帖子Text border using css (border around text)

引用的

text-shadow值