Bagaimanakah Anda Boleh Mencipta Bayang-bayang Kotak Berbilang pada Elemen Tunggal dalam CSS?

Menggunakan Berbilang Bayang Kotak CSS3 pada Elemen Tunggal

Dalam CSS, adalah mungkin untuk menggunakan berbilang bayang kotak pada satu elemen menggunakan CSS3. Ini menawarkan fleksibiliti yang lebih besar apabila mencipta kesan bayang yang kompleks, seperti menggabungkan cahaya dalaman dengan bayang jatuh luar.

Masalah:

Anda mahu meniru mockup Photoshop yang mempunyai dua bayang pada butang: bayang kotak dalam yang lebih ringan dan bayang jatuh luar. Walau bagaimanapun, sifat kotak-bayang CSS nampaknya hanya membenarkan satu kesan bayang-bayang bagi setiap elemen.

Penyelesaian:

Untuk mencapai kesan dwi bayang-bayang yang diingini, anda boleh menggunakan sintaks yang dipisahkan koma untuk menentukan berbilang bayang. Contohnya:

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

Dalam kod ini:

• Bayang-bayang pertama ialah bayang kotak inset, dengan warna yang lebih terang (#dcffa6) dan offset 2px.
• Bayang-bayang kedua ialah bayang-bayang jatuh, dengan warna yang lebih gelap (#000) dan offset 2px untuk mendatar dan 5px untuk menegak.

Dengan memisahkan bayang-bayang ini dengan koma , anda boleh mencipta butang dengan kedua-dua cahaya dalam dan bayang-bayang jatuh luar, seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mencipta Bayang-bayang Kotak Berbilang pada Elemen Tunggal dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!