shadowbox-shadow

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>

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

shadowbox-shadow

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]