2016-02-02 3 views
0

Я пытаюсь добавить свойство text-shadow в таблицу стилей CSS, и это работает для IE, Chrome, Opera и Safari, но я не могу заставить его отображаться в Firefox, даже если я использую -moz-text-shadow. Я запускаю версию 43.0.4. Кто-нибудь знает, если это известная проблема, и есть ли взлом? Ниже приведен CSS, который управляет h1, к которому я пытаюсь применить текстовую тень.CSS Text-Shadow не работает в Firefox

/* =Headings 
-------------------------------------------------------------- */ 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a { 
    font-weight: 700; 
    line-height: 1.0em; 
    word-wrap: break-word; 
} 

h1 { 
    margin-top: 0.5em; 
    margin-bottom: 0.5em; 
    font-size: 2.625em; /* = 42px */ 
    -moz-text-shadow: 0 0 3px 2px #000; 
    text-shadow: 0 0 3px 2px #000; 
} 

h2 { 
    margin-top: 0.75em; 
    margin-bottom: 0.75em; 
    font-size: 2.250em; /* = 36px */ 
} 

h3 { 
    margin-top: 0.857em; 
    margin-bottom: 0.857em; 
    font-size: 1.875em; /* = 30px */ 
} 

h4 { 
    margin-top: 1em; 
    margin-bottom: 1em; 
    font-size: 1.500em; /* = 24px */ 
} 

h5 { 
    margin-top: 1.125em; 
    margin-bottom: 1.125em; 
    font-size: 1.125em; /* = 18px */ 
} 

h6 { 
    margin-top: 1.285em; 
    margin-bottom: 1.285em; 
    font-size: 1.000em; /* = 16px */ 
} 
+0

Нет дополнительных стилей, контролирующих презентацию h1. –

+1

Ваш код неверен и не должен работать в любом браузере. «text-shadow» принимает [максимум 4 значения] (https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) (смещение-x, смещение-y, размытие-радиус , и цвет), но вы входите в 5 (например, если это была «коробка-тень»). Если вы удалите последнее значение перед цветом, оно будет работать нормально. –

+0

Большое спасибо. Это сработало, когда я удалил дополнительный параметр! –

ответ

1

Свойство text-shadow CSS определяется следующим образом:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; 

Так у вас есть:

text-shadow: 0 0 3px 2px #000; 

Что будет:

h-shadow: 0 
v-shadow: 0 
blur-radius: 3px 
color: 2px!!! 

Так что попробуйте удалить 2px ценность, и все будет хорошо.

1

Ваш код является неправильным и не должен работать в любом браузере. text-shadow принимает maximum of 4 values (смещение-x, смещение-y, размытие-радиус и цвет), но вы входите в 5 (как если бы это был box-shadow, что позволяет 5). Если вы удалите последнее значение перед цветом, оно будет работать нормально:

h1 { 
    margin-top: 0.5em; 
    margin-bottom: 0.5em; 
    font-size: 2.625em; /* = 42px */ 
    -moz-text-shadow: 0 0 3px #000; 
    text-shadow: 0 0 3px #000; 
} 
Смежные вопросы