Bagaimana untuk melaksanakan bayangan dalaman teks?

Question

Bolehkah bayangan teks direalisasikan dengan bayangan teks Jadi bagaimana untuk memaparkan bayangan dalaman teks?

Answer 1

Intinya ialah menggunakan warna lutsinar RGBA untuk mensimulasikan kesan bayangan dalaman fon.

body{
background:#fff;
}
.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

Prinsipnya sangat mudah, bayang teks sentiasa berada di bawah fon, jadi gunakan berbilang bayang-bayang teks untuk mula-mula mensimulasikan kesan bayang-bayang terbenam di bawah warna pepejal fon, dan kemudian, dengan mengurangkan ketelusan daripada fon, kesan fon ialah Kesan simulasi bayang-bayang dalam. Sememangnya simulasi sebegini ada batasan Contohnya warna latar belakang dan bayangan simulasi mesti sama, jika tidak ia akan mengelirukan, haha. Kedua, ia tidak akan berfungsi dalam pelayar yang tidak menyokong RGBA, dan warna lalai mesti ditambah di atas RGBA untuk memastikan penyemak imbas lama sekurang-kurangnya boleh memaparkan warna pepejal:

.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

Akhir sekali, jika anda memilih teks dalam contoh di atas, Anda boleh melihat kekaburan yang jelas. Ini juga telah disebut sebelum ini, kerana kesan berbilang bayang masih berkesan apabila dipilih, jadi untuk kebolehbacaan teks, bayang teks apabila dipilih harus dialih keluar.

rreeee