Seperti yang kita sedia maklum, CSS membekalkan kita dengan pelbagai sifat dan kelas pseudo yang membolehkan pembangun menambah gaya yang diingini pada elemen. Salah satu sifat ini ialah sifat bayangan kotak ia membolehkan kita menambah kesan seperti bayang-bayang di sekeliling elemen.
Box Shadow ialah sifat CSS yang digunakan untuk mencipta kesan bayang luar atau dalam pada elemen. Ia menggunakan satu atau lebih bayang-bayang pada elemen, setiap satunya ditentukan oleh pengimbang X dan Y daripada elemen, jejari kabur, jejari meresap, warna dan nilai kelegapan.
Sifat bayang kotak boleh menerima berbilang nilai, dipisahkan dengan koma; setiap nilai mentakrifkan kesan bayangan. Bayang kotak tanpa sebarang offset akan menjadikannya kelihatan seperti bentuk rata, sama seperti apabila dicetak di atas kertas.
Dengan mengandaikan bahawa elemen yang kita gunakan bayang-bayang kotak untuk menentukan beberapa bentuk jejari sempadan, kesan bayangan-kotak juga akan mempunyai sempadan melengkung seperti elemen itu. Berbilang bayang-bayang kotak dipesan pada paksi-z dalam susunan yang sama seperti berbilang bayang-bayang teks.
Kita boleh menetapkan bayang kotak kepada elemen menggunakan -
Dua Nilai - Setiap kali kita menggunakan sifat bayangan kotak dengan dua nilai, ia akan digunakan sebagai nilai untuk ofset X dan Y.
Tiga nilai - Dua nilai pertama bertindak sebagai nilai mengimbangi X dan Y, manakala nilai ketiga digunakan untuk kesan jejari kabur.
Empat nilai - Nilai keempat dianggap sebagai nilai jejari resapan, dan nilai selebihnya ialah nilai-nilai X ofset, Y ofset dan jejari kabur masing-masing.
Inset - Ia adalah nilai pilihan dan kehadirannya akan memindingkan bayang bingkai ke satu sisi. Jika kita tidak menyatakan ini, bayang akan kelihatan dinaikkan di atas, seperti bayang titisan
Warna - Ini adalah satu lagi nilai pilihan yang menetapkan warna bayang-bayang. Jika tidak dinyatakan, warna lalai kepada warna semasa elemen.
Nilai awalnya ialah tiada dan terpakai kepada semua elemen. Jenis animasi senarai bayang boleh digunakan untuk animasi, tetapi ia tidak boleh diwarisi.
Diberikan di bawah ialah contoh menggunakan sifat kotak-bayang dalam CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadow</title>
<style>
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<blockquote>
<q>
This is an example of box shadow effect on elements <br />
Another temporary line for extra text
</q>
<p>— Example of Box Shadow</p>
</blockquote>
</body>
</html>
Sekarang kita memahami sifat kotak Shadow, kita akan melihat apakah "webkit" dalam CSS dan sebab kita memerlukannya. Nanti kita akan bincangkan webkit box Shadow.
Webkit ialah enjin penyemak imbas web Apple dan digunakan oleh hampir semua aplikasi macOS. Terdapat banyak enjin penyemak imbas web lain, seperti Gecko untuk Firefox, Blink untuk tepi, dan banyak lagi. Jadi, persoalan timbul, mengapa kita memerlukannya.
Awalan -webkit pada pemilih CSS menunjukkan sifat yang hanya diproses oleh enjin tersebut, serupa dengan atribut -moz. Dengan menyatakan ini, kami pada dasarnya memberitahu penyemak imbas untuk hanya menggunakannya apabila menggunakan enjin penyemak imbas tertentu, jika tidak, biarkan ia seperti sedia ada. Ia menyusahkan untuk digunakan; itulah sebabnya ramai pembangun mahu ia dihentikan secepat mungkin.
Seperti sifat box-shadow, sifat webkit-box-shadow juga menambah kesan seperti bayang-bayang pada bingkai elemen yang digunakan. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pelaksanaannya adalah khusus untuk penyemak imbas seperti Chrome atau Apple Safari.
Nilai yang berkemungkinan yang boleh diberikan kepada harta ini ialah -
X-offset - Ia menentukan offset mendatar atau jarak ke elemen.
Y Offset - Ini juga menentukan offset atau jarak, tetapi dalam arah menegak
Blur - Ia adalah nilai panjang, jika ia besar, kesan kabur yang dihasilkan akan menjadi besar, jadi kesan bayangan akan menjadi lebih besar, begitu juga sebaliknya.
Contoh penggunaan web kit-box-shadow dalam CSS diberikan di bawah.
<!DOCTYPE html>
<html>
<head>
<style>
.BoxShadow {
color: blue;
border: solid 1px blue;
margin: 1.5rem 3rem;
-webkit-box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<div class="BoxShadow">
<h1>Sample text</h1>
<p>Some more random text</p>
</div>
</body>
</html>
Sekarang kita memahami kedua-dua sifat ini, mari kita senaraikan perbezaan antara mereka.
Sifat box-shadow dilaksanakan secara universal, manakala sebaliknya "webkitbox-shadow" hanya berfungsi dalam penyemak imbas menggunakan enjin penyemak imbas web tertentu, iaitu Safari atau Google Chrome.
Harta kotak Shadow membolehkan kami menggayakan kesan bayang-bayang dalam semua versi terbaharu, tetapi jika kami perlu menggunakan versi pelayar yang lebih lama, kami perlu menggunakan webkit-box-shadow.
Untuk meringkaskan, perbezaan utama antara -webkit-box-shadow dan box-shadow dalam CSS ialah -webkit-box-shadow ialah awalan vendor untuk sifat box-shadow yang diperkenalkan oleh penyemak imbas Webkit. Sifat bayang-kotak membolehkan anda menggunakan kesan bayang-bayang jatuh pada elemen tanpa menggunakan imej atau sumber luaran lain. Atribut -webkit-box-shadow telah ditamatkan dan digantikan dengan sintaks kotak-bayang standard. Kerana kebanyakan pelayar moden menyokongnya. Ringkasnya, kedua-dua sifat digunakan untuk mencipta bayang-bayang pada elemen, tetapi hanya satu daripadanya harus digunakan kerana yang satu lagi akan ditamatkan dari semasa ke semasa.
Atas ialah kandungan terperinci Perbezaan antara -webkit-box-shadow dan box-shadow dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
