Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah atribut bayangan yang dilaksanakan dalam css3
Atribut bayangan yang dilaksanakan dalam css3 ialah: 1. atribut teks-bayang, yang boleh mencapai kesan bayangan teks 2. atribut kotak-bayang, yang boleh mencapai kesan bayangan sempadan, yang perlu digabungkan dengan drop-shadow() Digunakan bersama-sama dengan fungsi, anda boleh menetapkan kesan bayang-bayang pada imej.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
css3 melaksanakan atribut bayang
1 Atribut bayang-teks digunakan untuk menetapkan teks berbayang; anda boleh menetapkan panjang, lebar dan jarak kabur bayang-bayang, serta warna bayang-bayang.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css设置文本阴影效果</title> <style> h1 { color: red; text-shadow: 3px 5px 5px #656B79; } </style> </head> <body> <h1>文本阴影!</h1> </body> </html>2 atribut bayang-kotak - untuk mencapai kesan bayang-bayang sempadan
atribut bayang-kotak boleh menggunakan bayang-bayang Untuk. kotak teks, anda boleh menetapkan panjang piksel, lebar dan jarak kabur bayang-bayang serta warna bayang-bayang.
bayang kotak boleh menambah bayang pada elemen, menyokong penambahan satu atau lebih.
Parameter:box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
Nota: inset boleh ditulis dalam parameter pertama atau terakhir, kedudukan lain adalah tidak sah.
Jejari kabur bayang:
kod css:
Kesan:#box{ width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px #666; }
Jejari pengembangan bayang-bayang:
#box{ width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px -3px #666; }
#box{ width:50px; height:50px; background:#fff; box-shadow:-5px 5px 5px #666; }
Y-axis offset adalah negatif:
Kesan:#box{ width:50px; height:50px; background:#fff; box-shadow:5px -5px 5px #666; }
Bayang-bayang luar :
Kesan:#box{ width:50px; height:50px; background:green; box-shadow:5px 4px 10px #666; }
Bayangan dalaman:
Kesan:#box{ width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px #666 inset; }
Tambah berbilang bayang:
Kesan:#box{ width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px #666 inset, 3px 3px 5px pink, 6px 4px 2px green; }3 atribut penapis
atribut penapis Mentakrifkan kesan visual unsur (biasanya ) Apabila digunakan dengan fungsi drop-shadow(), ia boleh menetapkan kesan bayang-bayang pada imej.
Bayang-bayang ialah versi offset topeng yang digubah di bawah imej, boleh mempunyai kabur dan boleh dilukis dalam warna tertentu. Fungsi ini menerima nilai jenisfilter:drop-shadow(h-shadow v-shadow blur spread color);
查看
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red); } </style> </head> <body> <p>给图像设置一个阴影效果:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%"> </body> </html>
(学习视频分享:css视频教程)
Atas ialah kandungan terperinci Apakah atribut bayangan yang dilaksanakan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!