CSS-объединить тень текста с контуром текста? [дубликат]

На этот вопрос уже есть ответ здесь:

Я пытаюсь это сделать (не обращайте внимания на красный фон)Введите описание изображения здесь

Итак, вот что я получил: я могу получить границу вокруг текста, но тогда я не могу объединить ее с тенью текста... Как мне это обойти? Может быть это что-то с :before :after утверждениями?

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    /*
    text-shadow: 0 0 5px #000000; 
    
    THIS WILL GIVE THE TEXT THE SHADOW*/
    
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    /*THIS WILL GIVE THE TEXT THE BORDER*/
    
    /*How can I combine these two?*/
}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
5 6
html css css3 box-shadow

5 ответов:

Может быть, это решение-то, что вы ищете: 

h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
     3px 3px 5px #000,
     -1px -1px 5px #000,  
     1px -1px 5px #000,
     -1px 1px 5px #000,
      1px 1px 5px #000;
}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
1

Взгляните на Эту скрипку. вы должны использовать -webkit-text-stroke, а затем вы можете использовать stroke и shadow отдельно

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    -webkit-text-stroke: 1px black;
    }
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

.

1

Не уверен, что это то, что вы ищете, но просто добавьте другое значение с X и Y, установленным в -2px, должно это сделать.

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px -2px 10px black;
}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
Обратите внимание, что в приведенном выше фрагменте я добавил -2px -2px 10px black, который -2px является X, Другой - Y, и последний, который является 10px, является теневым распространением.
1

Что-то близкое к тому, что вы ищете.

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    color: white;
    text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
1

Попробуйте этот вариант для всех браузеров, которые стоит охватить: 

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */

filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */

}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

Или 

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    

    
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;


}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
1