Bayang dan Kesan Teks CSS: Tambahkan pelbagai bayang dan kesan khas pada teks anda

Bayang-bayang dan Kesan Teks CSS: Tambahkan pelbagai bayang-bayang dan kesan khas pada teks, contoh kod khusus diperlukan

Dalam reka bentuk web, teks Ia merupakan salah satu cara penting untuk memaparkan maklumat. Untuk menjadikan persembahan halaman lebih jelas dan menarik, kami boleh menambah pelbagai bayang-bayang dan kesan khas pada teks melalui CSS. Artikel ini memperkenalkan beberapa bayang teks biasa dan kesan khas serta menyediakan contoh kod yang sepadan.

1. Kesan bayang teks

1. Tambah bayang teks

Anda boleh menggunakan sifat bayang teks bagi CSS untuk menetapkan bayang teks Tambah kesan bayang. Sifat teks-bayang menerima empat nilai, iaitu mengimbangi mendatar, mengimbangi menegak, jejari kabur dan warna bayang-bayang. Contohnya:

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Dalam kod di atas, 2px mewakili ofset mendatar, 2px mewakili ofset menegak, 4px mewakili jejari kabur dan rgba(0, 0, 0, 0.5) mewakili warna bayang-bayang . Anda boleh melaraskan nilai ini mengikut keperluan untuk mendapatkan kesan bayang yang berbeza.

2. Bayang Dalaman Teks

Selain menambah kesan bayang-bayang di sekeliling teks, kita juga boleh menambah kesan bayang-bayang dalam pada teks. Ini boleh ditetapkan menggunakan sifat lejang teks CSS. Contohnya:

.text-inner-shadow {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
}

Dalam kod di atas, -webkit-text-stroke bermaksud menetapkan gaya lejang teks, 2px bermaksud lebar lejang, rgba(0, 0, 0, 0.5) bermaksud warna strok. Anda boleh melaraskan lebar dan warna strok mengikut keperluan.

2. Kesan teks khas

1. Kesan kecerunan teks

Anda boleh menggunakan jejari-linear CSS Atribut kecerunan menambah kesan kecerunan pada teks. Contohnya:

.gradient-text {
  background: -webkit-linear-gradient(#FFC600, #FF6A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Dalam kod di atas, -webkit-linear-gradient bermaksud menetapkan warna latar belakang kecerunan dan #FFC600 dan #FF6A00 mewakili warna permulaan dan akhir. -webkit-background-clip: teks bermaksud warna latar belakang digunakan hanya pada kandungan teks, dan -webkit-text-fill-color: transparent bermaksud warna teks ditetapkan kepada lutsinar. Ini akan memberikan teks warna kecerunan.

2. Kesan lejang teks

Anda boleh menggunakan sifat lejang teks CSS untuk menambah kesan lejang pada teks. Contohnya:

.stroke-text {
  -webkit-text-stroke: 2px black;
  color: white;
}

Dalam kod di atas, -webkit-text-stroke bermaksud menetapkan gaya strok teks, 2px bermaksud lebar strok, dan hitam bermaksud warna strok. warna: putih bermaksud warna teks adalah putih. Ini akan memberikan teks kesan stroke.

3. Kesan pantulan teks

Anda boleh menggunakan sifat limpahan teks dan ruang putih CSS untuk menambah kesan pantulan pada teks. Contohnya:

.reflective-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.reflective-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}

Dalam kod di atas, kelas teks pantulan mewakili teks yang akan ditambahkan kesan pantulan. Gunakan ::after pseudo-element untuk mencipta pseudo-element yang sama saiz dengan teks dan tetapkan latar belakangnya kepada warna kecerunan dari atas ke bawah. Melalui limpahan: tersembunyi dan ruang putih: atribut nowrap, julat paparan elemen pseudo dihadkan kepada bahagian bawah kandungan teks, dengan itu mencapai kesan pantulan.

Di atas ialah beberapa contoh bayang teks biasa dan kesan khas. Anda boleh melaraskan kod ini mengikut keperluan dan menambah bayang-bayang dan kesan khas yang berbeza pada teks untuk mencapai pengindahan halaman yang lebih baik. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bayang dan Kesan Teks CSS: Tambahkan pelbagai bayang dan kesan khas pada teks anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!