Bagaimana untuk Mencipta Bayangan Teks Dalaman dengan Unsur Pseudo CSS?

Mencipta Bayang Teks Dalaman dengan CSS

Anda sedang mencari teknik untuk membuang bayang-bayang dalaman yang kabur pada teks dalam halaman web. Anda telah meneroka sifat bayangan kotak tetapi menyedari hadnya kepada teduhan dalam. Artikel ini bertujuan untuk membimbing anda dengan teknik baru yang menggunakan unsur pseudo untuk mencapai kesan yang anda inginkan.

Helah Elemen Pseudo

Dalam CSS, unsur pseudo ( :sebelum dan :selepas) membolehkan penciptaan kandungan tambahan dalam elemen. Berikut ialah aplikasi bijak elemen ini untuk mencipta bayang dalam:

1. Kandungan: Tetapkan atribut tajuk pada elemen teks anda dengan kandungan bayang dalam yang diingini. Kandungan ini akan digunakan oleh unsur pseudo.
2. Unsur Pseudo: Tambahkan dua unsur pseudo (:sebelum dan :selepas) pada elemen teks. Tetapkan kandungan yang sama seperti atribut tajuk dan beri mereka kedudukan mengimbangi sedikit (cth., 1px kiri dan 1px atas) berbanding dengan teks asal.
3. Warna dan Kelegapan: Laraskan warna dan kelegapan unsur pseudo untuk mencipta bayang kabur lut sinar. Sebagai contoh, rgba(255, 255, 255, .1) akan mencipta bayang putih dengan kelegapan 10%.
4. Z-Index: Letakkan elemen pseudo di belakang teks asal menggunakan indeks z dan nilai negatif untuk memastikan ia dipaparkan di belakang teks.

Kod Contoh

Di bawah ialah contoh kod yang menunjukkan teknik:

<code class="css">.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 id="Lorem-ipsum">Lorem ipsum</h1></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bayangan Teks Dalaman dengan Unsur Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!