Rumah > Artikel > hujung hadapan web > Terdapat beberapa kategori bayang-bayang dalam css3
Bayang-bayang dalam CSS3 terbahagi kepada 2 kategori: 1. Bayang teks, sintaks tetapan "bayang-teks: kedudukan mendatar kedudukan menegak warna jarak kabur;"; kedudukan Kedudukan menegak inset warna kabur jarak;".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Terdapat dua jenis bayang dalam CSS3: teks-bayang dan kotak-bayangan ini boleh mencapai kesan bayangan tanpa menambah imej latar belakang dan disediakan apabila kami mencantikkan halaman web. Jadi bagaimana untuk menggunakan kedua-dua atribut ini?
1 bayang teks
Spesifikasi sintaks atribut ini ialah teks-bayang: 1px 1px 1px #. 666 ;
Sebelum bercakap tentang sifat bayangan css, mari kita fahami akal budi tentang bayang-bayang terlebih dahulu.
Bayang-bayang dijana apabila cahaya memancar pada objek, yang akan menghasilkan bayang-bayang di kawasan bercahaya belakang.
Seperti yang ditunjukkan di bawah, ia adalah bayang yang dihasilkan oleh kanan dan bawah:
Gambar di bawah ialah bayang yang dihasilkan oleh ke atas dan kiri
Mari lihat pada atribut teks-bayang-bayang Atribut termasuk empat nilai Nilai pertama ialah mengimbangi mendatar bayang-bayang, nilai kedua mewakili mengimbangi menegak, dan nilai ketiga mewakili. julat Divergence, nilai keempat mewakili warna bayang-bayang.
1. Secara lalai, nilai positif digunakan untuk bayang-bayang di sebelah kanan dan bawah, dan nilai negatif digunakan untuk bayang-bayang kiri dan atas.
bayang-teks: 1px 1px 1px #666 bermaksud bayang-bayang beralih satu piksel ke kanan dan ke bawah, bayang-bayang teks: -1px -1px 1px #666; dan bayang-bayang Beralih ke atas. text-shadow: 0px 0px 1px #666; bermakna tiada offset Pada masa ini, akan ada bayang-bayang yang sama di sekeliling, seperti yang ditunjukkan di bawah
2. Berbilang. set nilai atribut Anda boleh menggunakan koma untuk memisahkan
text-shadow: 1px 1px 1px #666, -1px -1px 1px #666 bermakna terdapat bayang-bayang yang diimbangi oleh satu piksel di sekelilingnya.
Menggunakan atribut teks-bayang-bayang kita boleh mencipta kesan teks timbul yang indah.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: #cccccc; } p{ text-align: center; font-size: 60px; margin-top: 50px; font-weight: bold; color: #cccccc; } .tu{ text-shadow: -1px -1px 1px #fff,1px 1px 1px #000; } .ao{ text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000; } </style> </head> <body> <p>好好学习</p> <p>天天向上</p> </body> </html>
berjalan seperti berikut:
2 > Atribut bayang-bayang kotak dan bayang-bayang teks adalah sangat serupa.
Enam nilai bayang kotak adalah seperti berikut: h-bayang Kedudukan bayang mendatar, nilainya boleh menjadi nombor negatif (tidak boleh ditinggalkan)Nota: Anda boleh menambah satu pada kotak atau berbilang warna. Atribut ini ialah senarai bayang-bayang yang dipisahkan koma Setiap bayang-bayang ditentukan oleh (2~4) nilai panjang, nilai warna pilihan dan kata kunci inset pilihan. Nilai untuk panjang yang ditinggalkan ialah 0.
tutorial video css
,bahagian hadapan web
)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3边框阴影</title> <style> #box1{ margin-top: 100px; margin-left:100px; background-color: #fff; width: 100px; height: 100px; box-shadow: 2px 2px 10px red, 5px 5px 20px blue; } </style> </head> <body> <div id="box1"></div> </body> </html>
Atas ialah kandungan terperinci Terdapat beberapa kategori bayang-bayang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!