Css kullanan metin kenarlığı (metnin etrafındaki kenarlık)

Metnin etrafına aşağıdaki resimdeki gibi bir çerçeve eklemenin bir yolu var mı?

Birden çok 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 CSS Hileleri olarak daha fazlasını okuyun .

Elbette. CSS3'ü kullanabilirsiniz text-shadow:

text-shadow: 0 0 2px #fff;

Ancak hemen tüm tarayıcılarda gösterilmeyecek. Modernizr gibi bir komut dosyası kitaplığı kullanmak , çoğu tarayıcıda doğru bir şekilde elde edilmesine yardımcı olacaktır.

Metin gölgelerini çoğaltmaya dayanan bu kadar çok çözümü sevmiyorum, gerçekten esnek değil, eklenecek yönlerin 8 olduğu 2 piksellik bir vuruş için işe yarayabilir, ancak sadece 3 piksel vuruş yönü 16 oldu ve bu böyle devam ediyor .. Yönetilmesi pek rahat değil.

Doğru araç var, bu SVG'dir <text> Tarayıcıların destek problemi bu durumda hiçbir işe yaramaz, çünkü metin gölgesinin kullanımının da kendi destek sorunu vardır, filter: progid:DXImageTransformkullanılabilir veya IE <10, ancak genellikle beklendiği gibi çalışmaz.

Bana göre en iyi çözüm, eski tarayıcı için kontursuz metinde bir yedeğe sahip SVG'dir:

Bu tür uygulamalar pratik olarak tüm Chrome ve Firefox sürümlerinde, Safari sürüm 3.04, Opera 8, IE 9'dan beri çalışır.

text-shadowDesteklenenlerle karşılaştırıldığında : Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, daha da uyumlu sonuçlar veriyor.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Aşağıdakiler, kapsamaya 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 */