CSS - テキストのシャドウとテキストのアウトラインを結合しますか？私はだからここ<a href="https://i.stack.imgur.com/XpTMd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XpTMd.png" alt="enter image description here"></a></p> <p>（赤の背景を気にしない）、これを達成しようとしている

Question

は私がテキストの周囲に境界線を得ることができますが、その後、私はテキストの影とそれを組み合わせることはできません得たものです。どうすればこの問題を回避できますか？多分それは: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

たぶん、このソリューションは、あなたが探しているものです。

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

はthisフィドルを見てみましょう。 あなたは-webkit-テキストストロークを使用する必要があり、その後、あなたは別に

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

あなたが探しているものかどうかは不明ですが、XとYに別の値を追加するだけで-2pxに設定してください。 -2pxである上記のスニペットでは、私は-2px -2px 10px blackを追加したことを

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>

注他のYで、10pxある最後の影の広がりで、Xです。

Answer 4

あなたの探しているものに近いもの。

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

カバーする価値があるすべてのブラウザのために、この方法を試してください。

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>