cari

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah kesan rangka teks?

Apakah kesan rangka teks?

WBOY
WBOYke hadapan
2023-08-23 21:25:021277semak imbas

Apakah kesan rangka teks?

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.

Gunakan pelbagai sifat CSS

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.

Tatabahasa

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 bagi

Contoh 1

ialah:

Contoh 1

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

Contoh 2

diterjemahkan sebagai:

Contoh 2

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>

Gunakan sifat CSS "Bayang-teks"

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.

Tatabahasa

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.

Contoh 3

Anda boleh menyimpannya tanpa terjemahan

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>

Tambah teks di dalam teg dan sapukan pukulan pada teks

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.

Tatabahasa

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 bagi

Contoh 4

ialah:

Contoh 4

Dalam contoh di bawah, kami telah menggunakan teg HTML untuk mencipta elemen HTML dan teg HTML Dalam CSS, kami menetapkan 'lebar lejang' kepada 3px untuk menunjukkan garis besar 3px dan 'sambungan garis lejang' kepada bulat supaya apabila dua baris bersambung, ia bergabung dalam bulatan. Selain itu, kami menggunakan 'isi: putih' untuk menetapkan warna teks kepada warna yang sama dengan latar belakang dan 'strok' untuk memaparkan teks sebagai garis besar coklat. 

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

css html webkit
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk memilih berbilang fail menggunakan teg input HTML?Artikel seterusnya：Bagaimana untuk memilih berbilang fail menggunakan teg input HTML?

Artikel berkaitan

Lihat lagi