Kadangkala, kita perlu menunjukkan hanya garis besar teks dan mengalih keluar padding teks. Ia juga boleh dikatakan sebagai kesan kontur.
Kami boleh menggunakan pelbagai sifat CSS untuk menjana kesan garis besar untuk teks. Contohnya, kita boleh menambah sempadan pada teks, mengalih keluar warna isian teks dan menambah kesan garis besar pada teks.
Di sini kami menggunakan tiga kaedah berbeza menggunakan HTML dan CSS untuk memaparkan teks dengan kesan garis besar.
Dalam kaedah ini, kami akan menggunakan tiga sifat CSS untuk menambah kesan garis besar pada teks. Yang pertama ialah "-webkit-text-fill-color" yang menukar warna isian teks menjadi sama dengan warna latar belakang. Yang kedua ialah "-webkit-text-lines-width", yang menambahkan lebar lejang pada teks, dan sifat CSS ketiga ialah "-webkit-text-lines-color", yang menambahkan warna garis besar pada teks.
Pengguna boleh menggunakan tiga sifat CSS berbeza untuk menambah kesan garis besar pada teks mengikut sintaks berikut.
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
Dalam sintaks di atas, kami menetapkan warna isian dan lebar lejang teks, dan lejang mewakili warna garis besar.
Terjemahan bahasa Cina bagiDalam contoh di bawah, kami mempunyai elemen div dengan nama kelas 'text1' yang mengandungi beberapa teks. Kami telah menetapkan saiz fon teks dalam CSS. Selain itu, untuk menambah kesan garis besar pada teks, kami menetapkan warna isian putih, lebar lejang '1px' dan warna lejang 'biru' untuk menunjukkan garis besar biru.
Dalam output, pengguna boleh memerhati teks dengan garis besar biru.
<html>
<head>
<style>
.text1 {
font-size: 50px;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
<div class = "text1">This text has a default background.</div>
</body>
</html>
Dalam contoh di bawah, kami telah menetapkan latar belakang merah kepada elemen div. Seterusnya, kami menggunakan 'merah' sebagai warna isian, menjadikan warna isian sama dengan latar belakang. Di sini, lebar lejang ialah '1.2px' dan warna lejang ialah 'kuning'.
Dalam output, pengguna boleh memerhati teks dengan garis besar kuning pada latar belakang merah.
<html>
<head>
<style>
.text {
font-size: 50px;
width: 600px;
height: auto;
background-color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
<div class = "text"> This text has a red background. </div>
</body>
</html>
Dalam kaedah ini, kami akan menggunakan sifat CSS "bayang-teks" untuk menjana kesan garis besar untuk teks. Jika kami menyembunyikan teks dengan menetapkan warna teks yang sama seperti warna latar belakang, dan hanya menunjukkan bayang teks, kami boleh menjana kesan garis besar.
Pengguna boleh menggunakan sifat CSS “text-shadow” untuk menambah kesan garis besar pada teks dengan mengikut sintaks berikut.
text-shadow: x-offset y-offset blur color;
Harta "text-shadow" mengambil 4 nilai berbeza untuk menetapkan bayang-bayang. Yang pertama ialah mengimbangi x, yang kedua ialah mengimbangi y, yang ketiga ialah nilai kabur, dan yang keempat ialah warna bayang-bayang.
Dalam contoh di bawah, elemen div mengandungi teks. Dalam CSS, kami menetapkan warna latar belakang dan warna fon menjadi sama. Kemudian, kami menggunakan sifat CSS 'text-shadow' untuk menambah kesan garis besar. Di sini, kami telah menggunakan 4 berbanding 4 nilai untuk nilai 'text-shadow'. Pasangan pertama adalah untuk bayang kanan, pasangan kedua untuk bayang bawah, pasangan ketiga untuk bayang kiri, dan pasangan terakhir untuk bayang atas.
Sebenarnya, ia menunjukkan bayang teks dan bukannya strok, mencipta kesan garis besar.
<html>
<head>
<style>
.text {
color: rgb(117, 117, 235);
font-size: 50px;
background-color: rgb(117, 117, 235);
text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
}
</style>
</head>
<body>
<h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>
Di sini kami menukar teks kepada imej SVG. Selepas itu, kami akan menetapkan warna lejang, warna isian, lebar lejang, dsb., dan menggunakan pelbagai sifat CSS untuk menambah kesan garis besar pada teks.
Pengguna boleh mengikut sintaks berikut untuk menukar teks kepada SVG untuk menambah kesan garis besar pada teks.
paint-order: stroke; fill: color; stroke: color;
Dalam sintaks di atas, kami menetapkan warna isian teks. Selain itu, kami menetapkan warna strok teks. Sifat CSS "paint-order: stroke" membolehkan kami bertindih warna isian melalui lejang apabila warna isian bersilang antara satu sama lain.
Terjemahan bahasa Cina bagiDalam contoh di bawah, kami telah menggunakan teg HTML
<html>
<head>
<style>
svg {
font-size: 35px;
width: 490px;
height: 100;
}
.text {
stroke-width: 3px;
stroke-linejoin: round;
paint-order: stroke;
fill: white;
stroke: brown;
}
</style>
</head>
<body>
<h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
<svg viewBox = "0 0 490 100">
<text class = "text" x = "10" y = "45"> This text is in the svg element </text>
</svg>
</body>
</html>
Kami telah melihat tiga cara untuk menambah kesan garis besar pada teks. Kaedah pertama menggunakan tiga sifat CSS yang berbeza untuk menukar warna isian teks dan menetapkan strok teks.
Kaedah kedua menunjukkan "bayang teks" dan bukannya menunjukkan teks. Kaedah ketiga menukar teks kepada SVG dan menambah kesan garis besar pada teks menggunakan pelbagai sifat CSS berkaitan SVG.
Atas ialah kandungan terperinci Apakah kesan rangka teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
