Aşağıdaki resimdeki gibi metnin etrafına bir kenarlık entegre etmenin bir yolu var mı?
Birden fazla metin gölgesi kullanın:
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
<h1>test</h1>
Alternatif olarak, yalnızca webkit'te çalışan metin vuruşunu kullanabilirsiniz:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
<h1>test</h1>
Ayrıca devamını oku CSS-Tricks olarak.
Elbette. CSS3 text-shadow
kullanabilirsiniz:
text-shadow: 0 0 2px #fff;
Ancak tüm tarayıcılarda hemen görünmeyecektir. Modernizr](http://modernizr.com/) gibi bir script kütüphanesi kullanmak çoğu tarayıcıda doğru şekilde görünmesine yardımcı olacaktır.
Aşağıdakiler, ele alınmaya değer tüm tarayıcıları kapsayacaktır:
text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */