CodeKitHubApakah alat ini?
box-shadow ialah sifat CSS yang melukis bayang di belakang (atau di dalam) sesuatu elemen. Ditulis secara manual ia mengambil sehingga lima nilai mengikut susunan — ofset mendatar, ofset menegak, jejari kabur, jejari sebaran, dan warna — ditambah kata kunci inset pilihan, semuanya mudah tersalah atau menjadi terlalu halus/terlalu berat pada percubaan pertama.
Alat ini menukarnya kepada manipulasi terus: seret slaid, lihat bayang berubah pada kotak pratonton langsung, dan salin CSS yang tepat sebaik ia kelihatan betul. Pemilih warna bersama slaid kelegapan menjana nilai rgba() yang betul secara automatik, kerana bayang lut sinar secara amnya kelihatan lebih baik berbanding yang legap sepenuhnya.
Kenapa guna alat ini?
- Pratonton langsung dikemas kini serta-merta semasa anda melaraskan mana-mana kawalan — lihat bayang yang tepat sebelum anda komited kepada kod.
- Kawalan penuh terhadap offset-x, offset-y, kabur, sebaran, warna dan kelegapan di satu tempat.
- Satu klik menambah inset untuk rupa ditekan / lekuk dan bukannya bayang titisan terapung.
- Menghasilkan CSS sedia tampal dengan warna telah ditukar kepada rgba() pada kelegapan pilihan anda.
- Berjalan sepenuhnya dalam pelayar anda — tiada apa yang anda konfigurasi dimuat naik ke mana-mana.
- Percuma, tiada pendaftaran, berfungsi di mudah alih.
Cara menggunakannya
- Tetapkan offset-x dan offset-y untuk meletakkan bayang — nilai positif menolak ke kanan/bawah, nilai negatif menolak ke kiri/atas.
- Tingkatkan jejari kabur untuk melembutkan tepi bayang; tingkatkan sebaran untuk menjadikan bayang lebih besar daripada elemen itu sendiri.
- Pilih warna dan laraskan kelegapan — kebanyakan bayang realistik menggunakan kelegapan 15–40% dan bukan hitam pekat.
- Tanda 'inset' jika anda mahu bayang muncul di dalam sempadan elemen dan bukannya di belakangnya.
- Salin CSS yang dijana dan tampal ke dalam helaian gaya anda.
Contoh
Input
Ofset: 0px, 10px · Kabur: 20px · Sebaran: 0px · Warna: hitam pada kelegapan 35%Hasil
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Bayang lembut terus di bawah elemen tanpa ofset mendatar — salah satu gaya bayang kad/butang paling biasa.
Bayang tunggal vs. bayang berlapis
Alat ini membina satu lapisan bayang, yang meliputi majoriti kegunaan dunia sebenar — butang, kad, modal dan lungsur hampir selalu menggunakan satu bayang. CSS menyokong berbilang bayang dipisah koma pada elemen yang sama untuk kesan kedalaman yang lebih rumit (contohnya bayang ketat dan gelap dilapiskan di bawah bayang lembut dan lebar), tetapi itu penambahbaikan yang boleh anda tambah secara manual: jana satu bayang di sini, kemudian duplikasikan baris tersebut, laraskan set nilai kedua, dan gabungkan dengan koma.
Corak box-shadow biasa
- Kelambungan kad lembut: ofset kecil (0–4px), kabur sederhana (8–16px), hitam kelegapan 10–20%.
- Modal/lungsur tinggi: ofset lebih besar (4–10px) dan kabur (20–30px), kelegapan 20–35% untuk rasa terapung yang lebih kuat.
- Butang ditekan/inset: tanda inset, gunakan ofset yang terasa negatif kecil dan kabur sederhana supaya bayang terbaca sebagai lekukan dan bukan kelambungan.
- Sinaran berwarna: pilih warna jenama dan bukan hitam, tingkatkan kelegapan kepada 40–60%, dan tingkatkan sebaran sedikit untuk kesan sinaran lembut sekeliling butang.
- Bayang tajam/keras: tetapkan kabur kepada 0 dan sebaran kepada 0 untuk siluet ofset pejal dan bukan bayang lembut.
Berpadanan dengan sudut membulat
Bayang dan sudut membulat selalu digunakan bersama — kad, butang dan modal hampir selalu menggabungkan kedua-duanya. Gunakan Border Radius Generator untuk membulatkan sudut elemen yang sama, kemudian gunakan kedua-dua deklarasi CSS yang dijana bersama.
Soalan lazim
Apakah perbezaan antara kabur dan sebaran?
Jejari kabur melembutkan tepi bayang — nilai lebih tinggi menjadikan ia memudar dengan lebih beransur-ansur. Jejari sebaran menukar saiz bayang sebelum kabur digunakan — sebaran positif menjadikan bayang lebih besar daripada elemen pada semua sisi, sebaran negatif mengecutkannya. Kebanyakan bayang harian menggunakan kabur dengan sebaran kekal pada 0.
Kenapa guna rgba() dan bukan warna hex biasa untuk bayang?
Bayang legap sepenuhnya kelihatan kasar dan tidak realistik — bayang sebenar sentiasa agak lut sinar, membiarkan apa yang di belakangnya sedikit terlihat. rgba() membenarkan anda menetapkan ketelusan itu secara terus, itulah sebabnya alat ini sentiasa menghasilkan warna dengan nilai alfa dan bukan hex pejal.
Apakah fungsi kata kunci inset?
Tanpa inset, bayang dilukis di luar sempadan elemen, seolah-olah elemen sedang terapung di atas halaman. Dengan inset, bayang dilukis di dalam sempadan sebaliknya, menjadikan elemen kelihatan ditekan atau lekuk — biasa digunakan untuk keadaan butang aktif/ditekan atau medan input.
Bolehkah saya susun lebih daripada satu bayang pada elemen yang sama?
Ya — box-shadow CSS menerima senarai dipisah koma, dan pelayar merendernya mengikut susunan yang diberikan (bayang pertama berada di atas). Teknik biasa melapiskan bayang yang ketat dan lebih gelap dengan yang lebih lebar dan lembut untuk kedalaman yang lebih realistik berbanding kedua-duanya secara berasingan.
Adakah box-shadow menjejaskan susun atur atau hanya rupa?
Hanya rupa — box-shadow tidak pernah menjejaskan saiz elemen atau kedudukan elemen sekeliling, walaupun dengan nilai kabur atau sebaran yang besar. Jika bayang kelihatan terpotong secara visual, semak overflow: hidden pada elemen induk dan bukan nilai bayang itu sendiri.