Apakah ada cara untuk mengintegrasikan perbatasan di sekitar teks seperti gambar di bawah ini?
Menggunakan beberapa teks bayangan:
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 bisa menggunakan teks stroke, yang hanya bekerja 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>
Juga baca lebih lanjut sebagai CSS-Tricks.
Yakin. Anda bisa menggunakan CSS3 text-shadow
:
text-shadow: 0 0 2px #fff;
Namun itu tidak tampil di semua browser langsung. Menggunakan script perpustakaan seperti Modernizr akan membantu mendapatkan benar di sebagian besar browser sekalipun.
Saya don't seperti itu banyak solusi berdasarkan mengalikan teks-bayangan, it's tidak benar-benar fleksibel, itu mungkin bekerja untuk 2 piksel stroke di mana arah untuk menambahkan 8, tapi dengan hanya 3 piksel stroke arah menjadi 16, dan seterusnya... Tidak benar-benar confortable untuk mengelola.
Alat yang tepat ada,'s SVG <teks>
Browser' masalah dukungan yang bernilai apa-apa dalam kasus ini, 'menyebabkan penggunaan text-shadow memiliki dukungan sendiri masalah juga,
filter: progid:DXImageTransform
dapat digunakan atau IE < 10 tetapi sering doesn't bekerja seperti yang diharapkan.
Bagi saya solusi terbaik tetap SVG dengan fallback dalam tidak-membelai teks untuk browser yang lebih tua:
Jenis approuch bekerja pada prakteknya semua versi Chrome dan Firefox, Safari sejak versi 3.04, Opera 8, IE 9
Dibandingkan dengan teks-bayangan
yang mendukung adalah:
Chrome 4.0,
FF 3.5,
IE 10,
Safari 4.0,
Opera 9, itu hasil yang 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>