Lebar dan Warna Sempadan
Tambahkan sempadan dengan utiliti lebar border-*, tetapkan warnanya dengan border-{color}-{shade}, dan kawal setiap sisi secara berasingan.
Lebar dan Warna Sempadan ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 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.
Menambah Sempadan dengan Tailwind
Sempadan memisahkan unsur secara visual, mentakrifkan medan borang dan menambahkan struktur pada susun atur kad. Tailwind menyediakan keluarga utiliti border untuk mengawal lebar, warna, gaya dan sisi tertentu — semuanya tanpa menulis CSS tersuai. Kelas asas border menggunakan sempadan 1px padu dalam warna sempadan semasa, lalu memberikan titik permulaan yang kemas untuk mana-mana komponen yang mempunyai sempadan.
<!-- Simple bordered card -->
<div class="border border-gray-200 rounded-lg p-4 max-w-sm">
<h3 class="font-semibold">Card Title</h3>
<p class="text-gray-600 mt-2">Card content with a simple border.</p>
</div>Utiliti Lebar Sempadan
Utiliti lebar sempadan Tailwind mengawal ketebalan: border (1px), border-2 (2px), border-4 (4px) dan border-8 (8px). Kelas border biasa tanpa nombor menetapkan lebar kepada 1px. Anda juga boleh menggunakan border-0 untuk membuang sempadan secara jelas — berguna apabila mewarisi sempadan daripada gaya asas yang ingin ditindih.
<!-- Different border widths -->
<div class="space-y-3">
<div class="border p-3 rounded">border (1px)</div>
<div class="border-2 p-3 rounded">border-2 (2px)</div>
<div class="border-4 p-3 rounded">border-4 (4px)</div>
<div class="border-8 p-3 rounded">border-8 (8px)</div>
</div>Sempadan Sisi Individu
Anda boleh menggunakan sempadan pada sisi tertentu dengan varian arah: border-t (atas), border-r (kanan), border-b (bawah) dan border-l (kiri). Ini lazim digunakan untuk pautan navigasi dengan sempadan bawah, garisan aksen kiri pada petikan blok dan pembahagi atas antara item senarai. Gabungkan mengikut keperluan — border-t border-b hanya menambahkan sempadan mendatar.
<!-- Single-side borders for different effects -->
<div class="space-y-4">
<!-- Bottom border only — navigation tab style -->
<div class="border-b-2 border-blue-500 pb-2 font-semibold">Active Tab</div>
<!-- Left border — blockquote accent -->
<blockquote class="border-l-4 border-indigo-500 pl-4 text-gray-600 italic">
A meaningful quote with a left accent border.
</blockquote>
<!-- Top and bottom borders — horizontal rule effect -->
<div class="border-t border-b border-gray-200 py-3 text-center">Divider</div>
</div>Utiliti Warna Sempadan
Warna sempadan mengikut palet warna Tailwind dengan corak border-{color}-{shade}, seperti border-blue-500 atau border-gray-200. Jika tiada warna sempadan ditentukan, Tailwind menggunakan warna sempadan lalai, yang biasanya kelabu cerah. Warna khusus membolehkan sempadan menyampaikan makna semantik — merah untuk ralat, hijau untuk kejayaan, biru untuk fokus dan kelabu neutral untuk struktur.
<!-- Semantic border colors -->
<div class="space-y-3">
<div class="border-2 border-blue-500 rounded p-3">Info (blue border)</div>
<div class="border-2 border-green-500 rounded p-3">Success (green border)</div>
<div class="border-2 border-yellow-500 rounded p-3">Warning (yellow border)</div>
<div class="border-2 border-red-500 rounded p-3">Error (red border)</div>
</div>Warna Sempadan Lalai berbanding Tersuai
Tailwind menetapkan warna sempadan lalai global dalam gaya asasnya, jadi border biasa sudah mempunyai warna. Anda boleh menindih lalai ini secara global dalam konfigurasi anda melalui theme.borderColor.DEFAULT. Pada peringkat komponen, tambahkan sahaja mana-mana kelas warna border-* untuk menindihnya. Corak border border-gray-200 sangat lazim — sempadan kelabu cerah 1px yang kemas untuk struktur halus.
<!-- The most common border pattern: 1px gray -->
<div class="grid grid-cols-2 gap-4">
<div class="border border-gray-200 rounded-lg p-4">
<span class="font-medium">Default gray border</span>
</div>
<div class="border border-gray-300 rounded-lg p-4">
<span class="font-medium">Slightly darker gray</span>
</div>
</div>Warna Sempadan dengan Kelegapan
Gunakan pengubah kelegapan garis miring untuk menjadikan sempadan separa lutsinar: border-blue-500/50 memberikan sempadan biru dengan kelegapan 50%. Ini berguna untuk kesan lapisan halus apabila sempadan padu terlalu keras tetapi rona yang lebih cerah pula mengubah ton warna. Sempadan separa lutsinar lazim digunakan pada kad UI glassmorphism, bar navigasi berkabut dan komponen tindanan lut sinar.
<!-- Glass card with semi-transparent border -->
<div class="bg-white/10 backdrop-blur border border-white/30 rounded-2xl p-6 max-w-sm" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.3);">
<h3 class="text-white font-bold">Glass Card</h3>
<p class="text-white/80 mt-2">Semi-transparent border on a frosted glass card.</p>
</div>Utiliti Gaya Sempadan
Selain sempadan padu, Tailwind menyediakan border-dashed, border-dotted, border-double dan border-none untuk mengawal gaya visual garisan sempadan. Sempadan putus-putus sering digunakan untuk zon lepasan muat naik dan bahagian ruang letak. Sempadan bertitik muncul dalam pemisah jejak navigasi dan corak UI lama. border-none membuang sempadan sepenuhnya dan menindih gaya yang diwarisi.
<!-- Border style examples -->
<div class="space-y-3">
<div class="border-2 border-solid border-gray-400 p-3 rounded">Solid</div>
<div class="border-2 border-dashed border-blue-400 p-3 rounded">
Dashed — great for drag-and-drop zones
</div>
<div class="border-2 border-dotted border-purple-400 p-3 rounded">Dotted</div>
<div class="border-4 border-double border-green-400 p-3 rounded">Double</div>
</div>Pintasan Sempadan Paksi X dan Y
Untuk menggunakan sempadan pada kedua-dua sisi mendatar (atas dan bawah) atau kedua-dua sisi menegak (kiri dan kanan) secara serentak, gunakan border-x dan border-y. border-x menetapkan sempadan kiri dan kanan, manakala border-y menetapkan sempadan atas dan bawah. Ini lebih ringkas daripada menulis dua kelas arah yang berasingan dan menyampaikan maksudnya dengan jelas dalam HTML anda.
<!-- border-x and border-y shortcuts -->
<div class="space-y-4">
<!-- Left and right borders only -->
<div class="border-x-2 border-indigo-500 px-4 py-2">
border-x: left + right borders
</div>
<!-- Top and bottom borders only -->
<div class="border-y border-gray-300 py-3">
border-y: top + bottom borders
</div>
</div>Sempadan Responsif dan Keadaan
Utiliti sempadan berfungsi dengan awalan responsif dan varian keadaan. Corak lazim ialah border-b-2 border-transparent hover:border-blue-500 untuk pautan navigasi garis bawah beranimasi — sempadan sentiasa wujud (mengelakkan perubahan susun atur), tetapi menjadi kelihatan apabila dituding. Teknik ini menghasilkan kesan garis bawah yang lancar dan tidak melompat apabila muncul semasa tuding, tanpa sebarang JavaScript.
<!-- Animated underline navigation links -->
<nav class="flex gap-6 p-4">
<a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
Home
</a>
<a href="#" class="border-b-2 border-blue-500 pb-1 text-blue-600 font-medium">
Active Link
</a>
<a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
About
</a>
</nav>Utiliti Pembahagi untuk Anak
Daripada menambahkan border-b pada setiap anak kecuali yang terakhir, gunakan divide-y pada induk. Utiliti divide-y-* Tailwind secara automatik menambahkan sempadan atas pada setiap anak kecuali yang pertama, lalu menghasilkan item senarai yang dipisahkan dengan kemas. divide-x-* melakukan perkara yang sama secara mendatar. Gabungkan dengan divide-gray-200 untuk menetapkan warna pembahagi.
<!-- List with automatic dividers using divide utilities -->
<ul class="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-blue-400"></div>
<span>Alice Johnson</span>
</li>
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-green-400"></div>
<span>Bob Smith</span>
</li>
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-purple-400"></div>
<span>Carol Davis</span>
</li>
</ul>Sempadan dalam Medan Borang
Input borang menggunakan sempadan sebagai petunjuk visual utama bahawa unsur tersebut boleh berinteraksi. Corak standard ialah border border-gray-300 focus:border-blue-500 dengan gelang untuk keterlihatan fokus tambahan: focus:ring-2 focus:ring-blue-500/20. Untuk keadaan ralat, tukar secara bersyarat kepada border-red-500. Gabungan ini menghasilkan medan borang yang mudah dicapai dan jelas secara visual, serta memenuhi keperluan penunjuk fokus WCAG.
<!-- Form fields with semantic borders -->
<div class="space-y-4 max-w-sm">
<!-- Default state -->
<input
type="text"
placeholder="Default input"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
/>
<!-- Error state -->
<input
type="text"
placeholder="Error input"
class="w-full border border-red-500 rounded-lg px-4 py-2 bg-red-50 focus:outline-none"
/>
<p class="text-red-600 text-sm">This field is required</p>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda mempelajari bahawa: utiliti border-{width} daripada border (1px) hingga border-8 mengawal ketebalan, utiliti arah seperti border-t, border-b dan border-x menggunakan sempadan pada sisi tertentu, dan divide-y pada induk menghasilkan pembahagi anak secara automatik. Seterusnya, kita akan meneroka utiliti jejari sempadan untuk bucu bulat.
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 “Lebar dan Warna Sempadan” percuma?
Ya — teks penuh “Lebar dan Warna Sempadan” 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 “Lebar dan Warna Sempadan”?
Tambahkan sempadan dengan utiliti lebar border-*, tetapkan warnanya dengan border-{color}-{shade}, dan kawal setiap sisi secara berasingan. 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 1 daripada 4.
Berapa lamakah pelajaran “Lebar dan Warna Sempadan” 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.
Semua pelajaran dalam kursus ini
- Lebar dan Warna Sempadan
- Jejari Sempadan dan Bucu Bulat
- Bayang Kotak
- Utiliti Garis Luar dan Gelang