Bolehkah CSS3 Menambah Sempadan pada Teks?

Mempertingkatkan Teks dengan Sempadan Fon

Dalam bidang reka bentuk web, CSS3 terus merevolusikan keupayaan penggayaan. Di tengah-tengah banyak peningkatan sempadan baharu, satu persoalan timbul: bolehkah kita kini menghiasi fon kita dengan sempadan? Khususnya, sempadan putih pepejal ikonik yang mengelilingi logo Twitter biru telah mencetuskan rasa ingin tahu.

Penyelesaian CSS: Teks-Stroke

Walaupun belum disokong secara meluas, sememangnya terdapat sifat CSS eksperimen yang memegang kunci: lejang teks. Sifat ini, boleh diakses melalui awalan -webkit, membolehkan anda menambah strok pada teks anda.

h1 {
    -webkit-text-stroke: 2px black;
    font-family: sans; color: yellow;
}

CSS di atas akan menghasilkan

elemen dengan lejang hitam lebar 2 piksel di sekeliling teks kuning.

Keserasian Merentas Penyemak Imbas

Pada masa ini, lejang teks hanya disokong dalam penyemak imbas berasaskan WebKit seperti Chrome dan Safari. Untuk keserasian merentas pelayar, anda boleh meneroka teknik alternatif, seperti:

• Penapis CSS: Menggunakan gabungan penapis seperti bayang-bayang jatuh dan timbul boleh mencipta kesan sempadan, tetapi keputusan mungkin berbeza-beza merentas pelayar.
• Teks SVG: Dengan menukar teks anda kepada Elemen SVG, anda boleh menggunakan strok padanya menggunakan atribut SVG. Walau bagaimanapun, pendekatan ini memerlukan sokongan SVG dalam penyemak imbas.

Atas ialah kandungan terperinci Bolehkah CSS3 Menambah Sempadan pada Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!