кросс-браузерная тень текста (размытие)

Question

Как получить кросс-браузерную текстовую (размытую) тень? в том числе IE6, 7, 8.

есть ли решение css или js?

Я хочу получить текстовую тень с семантической и корректной разметкой.

Answer 1

Этот подход использует позиционированный span для достижения внешнего вида.

http://krijnhoetmer.nl/stuff/javascript/text-shadow/

Может быть чистое решение css с использованием преобразований.

Использование фильтров:

IE 6 поддерживает фильтры, поэтому вы можете использовать:

filter: dropshadow(color=#ffff00,offX=5,offY=5);

Таким образом, кросс-браузерный стиль может выглядеть следующим образом:

.my-class 
{
    -ms-filter: "dropshadow(color=#ffff00,offX=5,offY=5)";
    filter: dropshadow(color=#ffff00,offX=5,offY=5);
    text-shadow: #ff0 5px 5px;
}

Answer 2

Плагин jQuery Dropshadow может справиться с этим. Чтобы получить полную совместимость с браузером, вам нужно будет использовать JavaScript, но не существует чисто CSS-решения.

Answer 3

Вот демонстрационная программа Codepen , которая покажет вам, как создать эффект размытия текста вместе с несколькими другими текстовыми эффектами.

<div id="blurred">BLURRED</div>

blurred {
    text-shadow: 0px 0px 10px rgba(255,255,255,0.4),
    0px 0px 30px rgba(255,255,255,0.6),
    0px 0px 50px rgba(255,255,255,0.5),
    0px 0px 180px rgba(255,255,255,0.5);
    color: rgba(255,255,255,0);
}

---

В более старых версиях Internet Explorer версии 9, начиная с версии 5.5, вы можете создать эффект размытия, используя специальные атрибуты фильтра CSS для IE, например:

p { filter:Blur(Direction=45, Strength=8);height:40;width:400;font-size:20pt;font-weight:bold; }

Для более новых версий IE вы можете указать, что они должны использовать IE9-совместимость с этим мета-значением.

<meta http-equiv="X-UA-Compatible" content="IE=9" />