Браузерная поддержка значения распространения текста-тени

Question

Видел дискуссии здесь но прошло 2 года!

Я не знаю, использую ли я это право, но у меня есть следующее sass/compass код:

+text-shadow(red 0 3px 0 3px)

Генерация следующего css:

text-shadow: red 0 3px 3px, red 0 3px 0 3px;
text-shadow: red 0 3px 0 3px, red 0 3px 0 3px;

Который не работает ни в Chrome/Safari/Firefox/Opera.

Это что-то с декларацией или это spread функция была действительно удалена из спецификации?

Answer 1

В спецификации сказано, что

Это свойство принимает разделенный запятыми список эффектов тени, которые будут применены к тексту элемента. Значения интерпретируются как для 'box-shadow' [CSS3BG]. (Но обратите внимание, что значения распространения не допускаются.) Тень применяется ко всему тексту элемента, а также к любым текстовым декорациям, которые он определяет.

Answer 2

Это не идеально, но так как text-shadow принимает список значений, разделенных запятыми, вы можете "сложить" text-shadows друг над другом, чтобы получить более непрозрачный результат.

text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;

Answer 3

Компас не позволяет устанавливать значение спреда при использовании миксина: text-shadow как они сказали в своей документации:

если какая-либо тень имеет параметр распространения, это заставит миксин дважды выдать объявление тени, сначала без распространения, затем с включенным распространением. Это позволяет постепенно улучшать браузеры, которые поддерживают параметр распространения.

Кроме того, вы можете использовать миксин: single-text-shadow затем передайте все значения, включая значение спреда, разделенные запятыми.

single-text-shadow(0, 3px, 0, 3px, red);

Это будет работать, как вы ожидали.