看透/隱形白色文字陰影

我在DOM中有一個html元素;看透/隱形白色文字陰影

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

它附加了以下css規則;

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

h5位於具有灰色背景的列表元素中。這個想法是爲了更好的可讀性添加白色文字陰影。奇怪的是我沒有看到任何結果。

這就是我在瀏覽器中看到的;

html

這是devtools表明了我;

devtools

但是，如果我從白色改變背景顏色爲紅色，我能看到的變化。

這就是我在瀏覽器中看到的;

enter image description here

這是devtools表明了我;

enter image description here

我沒碰過的文字陰影規則的阿爾法參數。出於某種原因，紅色文字陰影顏色可見，而白色文字顏色不可見。

我正在使用bootstrap3，但我不認爲它會阻止任何地方的白色文本陰影。

爲什麼我無法看到文字周圍的白色陰影？我怎麼修復它？

來源

2014-01-28 cantdutchthis

據工作：http://jsfiddle.net/6ZkHg/ – Amberlamps

工程 - http://jsfiddle.net/Y45Fk/1/，它只是六角差別並不多， cuz #eee和#fff不是太深和淺的陰影 –

同意：http://jsfiddle.net/t4cQy/這是bg和文本陰影顏色太接近或CSS特異性/覆蓋問題。 –

陰影是有在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)

來源

2014-01-28 11:04:47 NoobEditor

啊是的。通過重複css規則，它們將重疊並導致更多效果。好的解決方案 – cantdutchthis

看透/隱形白色文字陰影

回答

相關問題