Batas teks menggunakan css (batas di sekeliling teks)

108

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

batas teks

text css

— jho1086
sumber

222

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;

masukkan deskripsi gambar di sini

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>

Luaskan cuplikan

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

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

masukkan deskripsi gambar di sini

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Luaskan cuplikan

Baca juga lebih lanjut sebagai CSS-Tricks.

— rak buku
sumber

PEMBERITAHUAN LAYAK: Silakan uji kemampuan lintas-browser dari metode ini ... Apakah mengalami masalah serius dengan klien di IE setidaknya 9 .. agak berpikir untuk menggunakan cara PNG.

— ErickBest

1

@ErickBest Tautan kedua menyebutkan masalah IE9. Meskipun halaman ini tidak sulit untuk menemukan di google caniuse.com/css-textshadow

— AnnanFay

Menyebabkan tampilan buruk untuk teks dengan transparansi (menggunakan rgba).

— Alejandro Nava

14

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.

— jtheman
sumber

1

Saya sudah mencoba pak itu tetapi yang saya butuhkan adalah teks putih solid di sekitar.

— jho1086

8

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>

Luaskan cuplikan

— Holden
sumber

1

terima kasih telah membagikan solusi Anda. Saya pikir hak Anda itu lebih fleksibel. Tetapi seringkali lebih efisien menggunakan CSS. Saya akan mencoba menggunakan SVG nanti.

— jho1086

6

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

— chezwhite.dll
sumber

3

Bisakah Anda juga menambahkan penjelasan?

— Robert

5

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

— dtbarne.dll
sumber