Bayang Kotak
Tambahkan kedalaman dengan shadow-sm hingga shadow-2xl, gunakan shadow-inner untuk kesan sisipan, dan buang bayang dengan shadow-none.
Bayang Kotak ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Bayang dan Kedalaman Visual
Bayang kotak mewujudkan rasa kedalaman dan ketinggian dalam antara muka rata. Bayang membuatkan unsur kelihatan terapung di atas halaman, menarik perhatian pengguna dan menunjukkan hierarki. Utiliti shadow-* Tailwind menyediakan skala bayang kotak yang direka dengan teliti dan serasi antara satu sama lain. Nilainya bermula daripada shadow-sm yang hampir tidak kelihatan hingga shadow-2xl yang dramatik, lalu memberi anda kawalan penuh terhadap ketinggian visual.
<!-- Shadow elevation scale -->
<div class="grid grid-cols-2 gap-6 p-8 bg-gray-50">
<div class="bg-white p-4 rounded-lg shadow-sm">shadow-sm</div>
<div class="bg-white p-4 rounded-lg shadow">shadow</div>
<div class="bg-white p-4 rounded-lg shadow-md">shadow-md</div>
<div class="bg-white p-4 rounded-lg shadow-lg">shadow-lg</div>
<div class="bg-white p-4 rounded-lg shadow-xl">shadow-xl</div>
<div class="bg-white p-4 rounded-lg shadow-2xl">shadow-2xl</div>
</div>Rujukan Utiliti Bayang
Setiap bayang dalam skala Tailwind direka untuk tahap ketinggian tertentu. shadow-sm (sangat halus, kabur 1px) sesuai untuk input dan unsur antara muka kecil. shadow dan shadow-md sesuai untuk kad dan menu lungsur. shadow-lg sesuai untuk tetingkap timbul dan modal. shadow-xl dan shadow-2xl dikhaskan untuk modal besar, tindanan skrin penuh dan unsur utama yang dramatik serta perlu kelihatan jauh lebih tinggi.
<!-- Semantic shadow usage by component type -->
<div class="space-y-4 max-w-sm">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm" placeholder="Input with shadow-sm" />
<div class="bg-white border rounded-xl p-4 shadow-md">Card with shadow-md</div>
<div class="bg-white rounded-2xl p-6 shadow-xl">Modal panel with shadow-xl</div>
</div>shadow-inner untuk Bayang Dalaman
shadow-inner mengenakan bayang ke arah dalam, menjadikan unsur kelihatan tenggelam atau ditekan ke dalam permukaan. Ini merupakan lawan visual kepada bayang ketinggian standard. Kegunaan lazimnya termasuk keadaan butang ditekan, medan input carian yang menunjukkan status aktif, bekas cekung dan landasan suis togol yang perlu kelihatan tenggelam bagi menghasilkan kontras dengan tombol yang terangkat.
<!-- Inset shadow for recessed / pressed effects -->
<div class="flex gap-4">
<!-- Search input looking recessed -->
<div class="flex-1 bg-gray-100 rounded-lg px-4 py-3 shadow-inner flex items-center gap-2">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
</svg>
<span class="text-gray-400 text-sm">Search...</span>
</div>
<!-- Pressed button state -->
<button class="bg-gray-200 shadow-inner px-4 py-2 rounded-lg font-medium text-gray-700">
Pressed
</button>
</div>shadow-none untuk Membuang Bayang
shadow-none membuang semua bayang kotak daripada sesuatu unsur. Ini berguna apabila anda perlu mengatasi bayang yang diwarisi, contohnya membuang bayang kad pada mudah alih apabila kad itu selebar skrin dan bayangnya kelihatan janggal di tepi skrin. Corak shadow-md md:shadow-lg menggunakan bayang yang lebih kecil pada mudah alih dan bayang yang lebih besar pada komputer meja, apabila kad terapung kelihatan lebih baik.
<!-- Remove shadow on mobile, restore on tablet+ -->
<div class="bg-white p-4 rounded-none sm:rounded-xl shadow-none sm:shadow-lg">
<h3 class="font-bold">Responsive Card Shadow</h3>
<p class="text-gray-600 mt-1">No shadow on mobile, shadow on larger screens.</p>
</div>Bayang Kotak Berwarna
Tailwind v3 memperkenalkan bayang berwarna: shadow-blue-500 menjadikan bayang berwarna biru. Ini menghasilkan kesan terang seperti cahaya yang popular dalam tema gelap dan halaman pendaratan. Warna bayang digunakan melalui pemboleh ubah CSS --tw-shadow-color, jadi anda masih memerlukan utiliti saiz shadow-* bersama kelas warna tersebut — contohnya, shadow-lg shadow-blue-500/50.
<!-- Colorful glow effects with colored shadows -->
<div class="flex gap-6 p-8 bg-gray-900 justify-center">
<button class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/50">
Blue Glow
</button>
<button class="bg-purple-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-purple-500/50">
Purple Glow
</button>
<button class="bg-pink-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-pink-500/50">
Pink Glow
</button>
</div>Corak Kad Terangkat Apabila Dihalau
Salah satu corak interaktif yang paling lazim ialah kesan terangkat apabila penuding berada di atas kad: kad bermula dengan bayang halus dan mendapat bayang yang lebih dalam apabila dihalau, lalu mencipta ilusi terangkat. Gabungkan shadow-md hover:shadow-xl dengan transition-shadow duration-300 untuk animasi yang lancar. Ini memberitahu pengguna bahawa kad tersebut interaktif dan menjadikan papan pemuka serta senarai produk kelihatan lebih kemas.
<!-- Interactive card with hover-lift effect -->
<div class="grid grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-xl p-5 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-blue-600">📊</span>
</div>
<h3 class="font-bold">Analytics</h3>
<p class="text-sm text-gray-500 mt-1">View your stats</p>
</div>
</div>Bayang Jatuh berbanding Bayang Kotak
Tailwind menyediakan bayang kotak (shadow-*) dan bayang jatuh (drop-shadow-*). Perbezaan utamanya ialah shadow-* dikenakan pada kotak sempadan unsur, iaitu segi empat, manakala drop-shadow-* ialah penapis CSS yang mengikut bentuk sebenar unsur yang kelihatan, termasuk kawasan lutsinar. drop-shadow-* sesuai untuk unsur berbentuk tidak sekata seperti ikon PNG dengan latar belakang lutsinar.
<!-- Box shadow (rectangular) vs drop shadow (shape-aware) -->
<div class="flex gap-8 p-6 items-center">
<!-- Box shadow on transparent PNG -->
<div>
<p class="text-sm mb-2">shadow-lg (rectangular)</p>
<svg class="w-16 h-16 text-blue-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
<!-- Drop shadow follows shape -->
<div>
<p class="text-sm mb-2">drop-shadow-lg (shape-aware)</p>
<svg class="w-16 h-16 text-blue-500 drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
</div>Melapiskan Berbilang Bayang
CSS menyokong berbilang bayang pada satu unsur, tetapi utiliti terbina dalam Tailwind hanya menyediakan satu bayang bagi setiap kelas. Untuk menghasilkan beberapa lapisan, lanjutkan tema Tailwind dalam tailwind.config.js dengan bayang tersuai yang mengandungi senarai takrif bayang yang dipisahkan dengan koma. Ini membolehkan pelapisan canggih seperti kesan ketinggian reka bentuk material atau cahaya luar halus yang digabungkan dengan bayang takrifan dalaman.
/* In tailwind.config.js */
module.exports = {
theme: {
extend: {
boxShadow: {
/* Layered: outer glow + standard shadow */
'glow-blue': '0 0 20px rgba(59,130,246,0.5), 0 4px 6px rgba(0,0,0,0.1)',
/* Material elevation --*/
'material': '0 2px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 16px 24px rgba(0,0,0,0.06)',
}
}
}
}Bayang dalam Mod Gelap
Bayang menjadi kurang kelihatan pada latar belakang gelap kerana biasanya menggunakan warna hitam lut sinar. Dalam mod gelap, bayang berwarna Tailwind — atau ton bayang yang lebih cerah — mengekalkan keterlihatannya. Corak lazim ialah shadow-gray-700/50 dalam mod gelap untuk menghasilkan bayang yang kelihatan pada permukaan gelap. Sebagai pilihan lain, gunakan sempadan dan bukannya bayang pada latar belakang gelap kerana sempadan kekal kelihatan tanpa mengira kecerahan latar belakang.
<!-- Shadow strategies for dark mode -->
<div class="bg-gray-900 p-8 rounded-xl space-y-4">
<!-- Standard shadow (invisible on dark bg) -->
<div class="bg-gray-800 p-4 rounded-lg shadow-xl">
Shadow barely visible
</div>
<!-- Colored shadow for dark mode -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg shadow-gray-700/70">
Shadow visible with colored tint
</div>
<!-- Border instead of shadow on dark bg -->
<div class="bg-gray-800 border border-gray-700 p-4 rounded-lg">
Border as separator on dark backgrounds
</div>
</div>Bayang Fokus untuk Kebolehcapaian
Penunjuk fokus yang kelihatan diwajibkan oleh piawaian kebolehcapaian WCAG 2.1 AA. Walaupun utiliti ring-* Tailwind merupakan pendekatan moden yang disyorkan, bayang kotak juga boleh berfungsi sebagai penunjuk fokus. Corak focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] menghasilkan lingkaran biru — pada asasnya perkara yang dilakukan oleh ring-2 ring-blue-500, tetapi menggunakan sifat bayang untuk keserasian dengan pelayar lama.
<!-- Accessible focus indicators using shadow and ring -->
<div class="flex gap-4 flex-wrap">
<!-- Using ring (preferred modern approach) -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Ring Focus
</button>
<!-- Using shadow for legacy support -->
<button class="bg-purple-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:shadow-[0_0_0_3px_rgba(168,85,247,0.5)]">
Shadow Focus
</button>
</div>Hierarki Bayang Lengkap
Dalam antara muka sebenar, penetapan bayang yang konsisten menghasilkan hierarki visual yang jelas. Gunakan pendekatan sistematik: shadow-sm untuk sempadan halus pada input, shadow-md untuk kad kandungan, shadow-lg untuk menu lungsur, shadow-xl untuk laci sisi dan shadow-2xl untuk dialog modal. Hierarki ini membantu pengguna memahami hubungan ruang serta mengenal pasti unsur yang bersifat kontekstual berbanding unsur utama.
<!-- Dashboard showing shadow hierarchy -->
<div class="bg-gray-100 p-6 space-y-4">
<!-- Page-level card: shadow-md -->
<div class="bg-white rounded-xl shadow-md p-5">
<h2 class="font-bold text-lg">Analytics Overview</h2>
<!-- Inline component: shadow-sm -->
<div class="mt-4 grid grid-cols-3 gap-3">
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">142</div>
<div class="text-xs text-gray-500">Users</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">94%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">38</div>
<div class="text-xs text-gray-500">Issues</div>
</div>
</div>
</div>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda mempelajari bahawa: shadow-sm hingga shadow-2xl menyediakan skala ketinggian untuk kedalaman, shadow-inner menghasilkan penampilan tenggelam bagi keadaan ditekan dan input carian, serta bayang berwarna seperti shadow-lg shadow-blue-500/50 menghasilkan kesan cahaya untuk tema gelap. Seterusnya, kita akan meneroka utiliti outline dan ring untuk penunjuk fokus yang boleh dicapai.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Bayang Kotak” percuma?
Ya — teks penuh “Bayang Kotak” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Bayang Kotak”?
Tambahkan kedalaman dengan shadow-sm hingga shadow-2xl, gunakan shadow-inner untuk kesan sisipan, dan buang bayang dengan shadow-none. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Bayang Kotak” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.