Bagaimana Anda Boleh Mencapai Berbilang Drop-Shadow pada Elemen Tunggal Menggunakan CSS?

Mencapai Berbilang Drop-Shadows pada Elemen Menggunakan CSS

Cuba untuk mencipta semula reka bentuk butang Photoshop dalam CSS, anda mungkin menghadapi had dalam menggunakan berbilang bayang-bayang kotak pada unsur tunggal. Secara lalai, CSS membenarkan hanya satu bayang-bayang kotak yang aktif, sama ada dalam atau luar.

Untuk mengatasi pengehadan ini, anda boleh memanfaatkan ciri pemisahan koma yang disediakan oleh CSS3. Ini membolehkan anda menentukan berbilang takrifan bayang-bayang dalam sifat kotak-bayang yang sama:

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

Dengan mengasingkan dua takrifan bayang-bayang dengan koma, anda boleh mencipta dua bayang-bayang berbeza pada elemen butang anda dengan berkesan. Bayang-bayang pertama, inset 0 2px 0px #dcffa6, mewakili bayang-bayang kotak cahaya dalam, manakala bayang-bayang kedua, 0 2px 5px #000, mencipta bayang-bayang jatuh luar.

Teknik ini membolehkan anda mencapai butang yang diingini penggayaan dengan dua bayang digunakan serentak, memberikan kesan yang lebih realistik dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mencapai Berbilang Drop-Shadow pada Elemen Tunggal Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!