CSS - Kết hợp bóng văn bản với đường viền văn bản?

Question

Tôi đang cố gắng thực hiện điều này (không quan tâm đến nền màu đỏ)

Vì vậy, đây là những gì tôi có thể có được viền xung quanh văn bản nhưng sau đó tôi không thể kết hợp nó với một bóng văn bản. .. Làm sao để tôi có được xung quanh này? Có lẽ đó là điều gì đó với câu lệnh :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>

Answer 1

Có lẽ giải pháp này là những gì bạn đang tìm kiếm:

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>

Answer 2

có một cái nhìn tại this fiddle. bạn phải sử dụng -webkit-text-đột quỵ và sau đó bạn có thể sử dụng đột quỵ và shadow riêng

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>

.

Answer 3

Không chắc chắn nếu đây là những gì bạn đang tìm kiếm, nhưng chỉ cần thêm một giá trị khác với X và Y đặt thành -2px nên làm điều đó.

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>

Lưu ý rằng trong đoạn mã trên, tôi đã thêm -2px -2px 10px black đó là -2px là X, người kia là Y và cuối cùng là 10px là cái bóng lây lan.

Answer 4

Thứ gì đó gần với những gì bạn đang tìm kiếm.

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>

Answer 5

Hãy thử này cho tất cả các trình duyệt giá trị bao gồm:

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>

Hoặc

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>