Cięcie tekstowe i cienie CSS3 w przeglądarce Firefox

Question

Hej, chłopaki, zastanawiam się, czy istnieje sposób dodawania obrysu i cienia do tekstu, mogę go uruchomić w przeglądarce Chrome i Safari, ponieważ webkit obsługuje tekst-obrys i cieniowanie tekstu. Mogę wyświetlić wyskakujące okno w przeglądarce Firefox, ale używa się cieniowania tekstu i odtwarzania z przesunięciem. Czy ktoś wie jak obejść ten problem.

Answer 1

Własność text-stroke nie jest częścią standardowej specyfikacji CSS, więc najlepiej go ominąć - Chrome będzie miał prawo do jej usunięcia w dowolnym momencie.

Masz rację, że można tworzyć text-stroke -jak efektów przy użyciu wielu oddzielonych przecinkami text-shadow s - w rzeczywistości można użyć tej samej techniki, aby dodać „rzeczywiste” cień także:

h1 { 
    font-size: 100px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00, 
      -1px 1px 0 #F00, 3px 3px 5px #333; 
}​ 

Be ostrożny, ponieważ text-shadow nie jest obsługiwany w IE9 i poniżej albo. Zalecam używanie go tylko do nieistotnych stylizacji: upewnij się, że tekst jest nadal tak samo czytelny, gdy nie ma tam cienia/sztucznego obrysu.

Answer 2

Firefoksa 48 obsługuje uderzeń tekstowych (z prefiks -webkit), jak również niektóre inne właściwości Webkit (czyli np -webkit-text-fill-color). Po prostu bądź ostrożny, że specyfikacja tak naprawdę tam nie istnieje i prawdopodobnie ulegnie zmianie w przyszłości.

Oto przykład, który obecnie pracuje w Firefox:

.outline { 
 
    -webkit-text-stroke: 1px red; 
 
} 
 

 
span:first-of-type { 
 
    display: block; 
 
    font-size: 24pt; 
 
    font-weight: bold; 
 
}

<span class="outline">This text has a stroke.</span> 
 
<span class="outline">(Even in Firefox)</span>

Patrz strona internetowa Mozilla:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke