2016-03-28 7 views
0

テキストシャドーとテキストストロークを組み合わせるとウェブプログラミングに問題があります。 同じテキストのシャドー版は両側でカットされていますが、それは私がそれがするとは思っていません。 これらのレートでシャドウとストロークの両方を使用している間にこの問題を回避する方法を知っている人はいますか?CSS:Text-Shadowバグ?

私は実際にSafariから同じエフェクトを表示していないことがわかります。 誰かが脳卒中の良い交換を知っていますか?

ここに私が使っているコードがあります。

p { 
 
    margin: 80px; 
 
    color: green; 
 
    text-shadow: 90px 0px red; 
 
    -webkit-text-stroke-width: 10px; 
 
    font-size: 3em; 
 
}
<p>V</p> 
 
<p>O</p>

+3

私は「テキストストローク」が放棄されたという印象を受けました。当面は間違いなく**非常に貧弱なサポートを得ています。プロダクションでは使用しないでください。 –

+0

合意は、それはクロムとサファリでのみ動作します – jmcgriz

+0

私はあなたが正しいと実際に見ることができます。 Safariから、同じ効果を表示しません。 –

答えて

0

ただ、このロジックを追加することを続けます。最大値があるかどうかわからない先にあなたをあきらめて申し訳ありません。

text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000; 
+0

こんにちは、問題は、影が、影にストロークを示すときに、影が側にカットされていることです。 もしあなたがサファリを持っていれば、このルールを試してみてください。それは私が何を意味するかを示してくれます(他のブラウザでストロークが表示されないことは明らかです): p { \t margin:80px; \t色:緑; \tテキストシャドウ:200px 1px 0#000; \t -webkit-text-stroke:50px blue; \t -oテキストストローク:50px青; \t -moz-text-stroke:50px青; \t font-size:9em; } –