Bagaimana untuk Mencipta Bayang Kotak Dwi CSS3 pada Elemen Tunggal?

Mencapai Dwi Bayang Kotak CSS3 pada Elemen Tunggal

Apabila mencipta reka bentuk butang yang kompleks menggunakan CSS3, keperluan sering timbul untuk menggunakan berbilang bayang kotak untuk kesan visual yang dikehendaki. Walau bagaimanapun, sifat semula jadi sifat bayangan kotak membenarkan hanya satu bayang pada satu masa. Ini boleh memberikan cabaran apabila cuba meniru reka bentuk yang menggabungkan kedua-dua bayang-bayang dalam dan jatuh.

Nasib baik, terdapat penyelesaian yang membolehkan anda mencapai kesan ini. Sifat box-shadow menerima berbilang nilai, dipisahkan dengan koma. Dengan menggunakan ciri ini, anda boleh menentukan bayang-bayang yang berbeza untuk elemen yang sama.

Sebagai contoh, untuk meniru reka bentuk butang daripada Photoshop dengan kedua-dua bayang dalam dan bayang jatuh, gunakan kod berikut:

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

Dalam kes ini, bayang pertama yang ditakrifkan (dengan kata kunci inset) mencipta kesan cahaya dalaman, manakala bayang kedua menghasilkan bayang jatuh yang diingini di luar butang.

Dengan menggunakan nilai dipisahkan koma dalam harta kotak-bayang, anda boleh dengan mudah mencapai kesan dwi-bayangan yang diingini pada satu elemen. Teknik ini membolehkan lebih fleksibiliti dalam mencipta reka bentuk yang kompleks dan menarik secara visual menggunakan bayang kotak CSS3.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bayang Kotak Dwi CSS3 pada Elemen Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!