Penjelasan terperinci tentang penggunaan atribut box-shadow CSS3:
Pertama sekali, mari kita fahami dari namanya Box-shadow boleh diuraikan kepada dua bahagian:
(1).box: mewakili kotak, iaitu apa yang kita panggil Elemen kotak, seperti div dan seumpamanya.
(2).bayangan: Maksud unjuran.
Kemudian atribut ini digunakan untuk menetapkan kesan bayang-bayang elemen.
Bab ini memperkenalkan penggunaan atribut box-shadow melalui contoh kod.
Struktur sintaks adalah seperti berikut:
box-shadow:h-shadow v-shadow blur spread color inset;
Penjelasan parameter:
1.h-shadow: Diperlukan, menetapkan offset mendatar bayang-bayang elemen, yang boleh menjadi nilai negatif, dan unitnya ialah piksel.
2.v-shadow: Diperlukan, menetapkan offset menegak bagi bayang-bayang elemen, yang boleh menjadi nilai negatif dan unitnya ialah piksel.
3.kabur: Pilihan, jejari kabur bayangan, yang hanya boleh positif Jika 0, ini bermakna tiada kesan kabur, piksel unit.
4.spread: Pilihan, saiz jejari bayang-bayang yang dikembangkan, yang boleh menjadi nilai negatif dan unitnya ialah piksel.
5.warna: Pilihan Jika parameter ini diabaikan, penyemak imbas akan memilih warna lalai Setiap penyemak imbas akan berbeza, yang menetapkan warna bayang-bayang.
6.inset: Pilihan, anda boleh menukar bayang luar kepada bayang dalam.
Contoh kod:
Contoh 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Kod di atas hanya menetapkan offset mendatar dan menegak bayang-bayang, dan tidak mempunyai kesan kabur pada masa yang sama tetapkan warna bayang-bayang Kemudian semak imbas Penyemak imbas akan memilih warna lalai, yang akan berbeza-beza antara penyemak imbas Ada yang hitam dan ada yang lutsinar.
Contoh 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Kod di atas menetapkan offset bayang dan warna bayang div.
Contoh 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Kod di atas menetapkan offset mendatar dan menegak, jejari kabur dan warna bayang-bayang div.
Contoh 4:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Kod di atas menetapkan offset mendatar dan menegak, jejari kabur, jejari pengembangan bayang dan warna bayang bayang div.
Contoh 5:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Kod di atas boleh menetapkan bayang-bayang dalam div dan menetapkan parameter lain.
Contoh 6:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
bahagian seterusnya