Batas teks menggunakan css (batas di sekeliling teks)

Apakah ada cara untuk mengintegrasikan border di sekeliling teks seperti gambar di bawah ini?

Gunakan beberapa bayangan teks:

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>

Sebagai alternatif, Anda dapat menggunakan guratan teks, yang hanya berfungsi di webkit:

-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>

Baca juga lebih lanjut sebagai CSS-Tricks.

Tentu. Anda bisa menggunakan CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Namun itu tidak akan langsung ditampilkan di semua browser. Menggunakan pustaka skrip seperti Modernizr akan membantu melakukannya dengan benar di sebagian besar browser.

Saya tidak suka banyak solusi berdasarkan penggandaan bayangan teks, ini tidak benar-benar fleksibel, ini mungkin berfungsi untuk goresan 2 piksel di mana arah yang ditambahkan adalah 8, tetapi dengan hanya 3 piksel arah goresan menjadi 16, dan seterusnya .. Tidak terlalu nyaman untuk dikelola.

Alat yang tepat ada, SVG <text> Masalah dukungan browser tidak ada artinya dalam kasus ini, karena penggunaan text-shadow memiliki masalah dukungannya sendiri juga, filter: progid:DXImageTransformdapat digunakan atau IE <10 tetapi seringkali tidak berfungsi seperti yang diharapkan.

Bagi saya, solusi terbaik tetap SVG dengan fallback dalam teks yang tidak digores untuk browser lama:

Pendekatan semacam ini bekerja secara praktis pada semua versi Chrome dan Firefox, Safari sejak versi 3.04, Opera 8, IE 9

Dibandingkan dengan text-shadowyang mendukung: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, hasilnya bahkan lebih kompatibel.

.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;

Berikut ini akan mencakup semua browser yang layak dicakup:

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 */