CSS Academy · Pelajaran

Gaya, Lebar dan Warna Sempadan

Gunakan sempadan dengan gaya, lebar dan warna berbeza menggunakan sifat bentuk ringkas dan bentuk panjang.

Pelajaran 2 daripada 413 langkah

Gaya, Lebar dan Warna Sempadan ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 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 CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Singkatan border

Singkatan border menetapkan keempat-empat sisi serentak: lebar, gaya dan warna.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Nilai border-style

border-style mesti ditetapkan supaya sempadan dipaparkan. Nilai yang tersedia:

solid — garis berterusan
dashed — sempang panjang
dotted — titik bulat
double — dua garis selari
groove/ridge/inset/outset — kesan 3D
none — tiada sempadan (lalai)

border-width

border-width menerima sebarang unit panjang atau kata kunci thin, medium, thick. Gunakan nombor untuk ketepatan.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color menerima sebarang nilai warna CSS, termasuk RGBA untuk ketelusan. currentColor mewarisi warna teks.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Sempadan Sisi Individu

Tetapkan sempadan pada sisi tertentu menggunakan sifat bentuk panjang:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius membundarkan penjuru unsur. Gunakan satu nilai untuk pembundaran seragam atau sehingga empat nilai untuk mengawal setiap penjuru.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

border-radius Elips

Jejari setiap penjuru boleh mempunyai dua nilai yang dipisahkan oleh / untuk pembundaran elips tidak simetri:

<div class="leaf"></div>

border-image

border-image menggantikan sempadan dengan imej terhiris atau kecerunan, sekali gus membolehkan sempadan hiasan:

<div class="fancy">Gradient border image</div>

outline berbanding border

outline melukis garis di luar sempadan. Berbeza daripada border, ia tidak menjejaskan susun atur atau dimensi unsur. Ia biasanya digunakan sebagai penunjuk fokus papan kekunci.

<button class="focus-demo">Focused Button (demo)</button>

Mengalih Keluar outline: Gunakan dengan Bijak

Jangan sekali-kali mengalih keluar garis :focus tanpa menyediakan penunjuk fokus alternatif yang kelihatan. Mengalih keluar gaya fokus menyusahkan pengguna papan kekunci dan pembaca skrin.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse untuk Jadual

Bagi jadual HTML, border-collapse: collapse menggabungkan sempadan sel bersebelahan menjadi satu garis untuk penampilan yang lebih kemas.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Semakan Pantas

Sifat CSS manakah yang melukis garis di luar sempadan tanpa menjejaskan susun atur unsur?

Jawab dalam pelajaran interaktif

Ringkasan

Singkatan border menetapkan lebar, gaya dan warna. border-radius membundarkan penjuru. outline berasingan daripada sempadan — ia tidak menjejaskan susun atur dan penting sebagai penunjuk fokus untuk kebolehcapaian papan kekunci.

Percuma untuk bermula

Pelajari CSS 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: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Gaya, Lebar dan Warna Sempadan” percuma?

Ya — teks penuh “Gaya, 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 CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Gaya, Lebar dan Warna Sempadan”?

Gunakan sempadan dengan gaya, lebar dan warna berbeza menggunakan sifat bentuk ringkas dan bentuk panjang. Anda berlatih 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 CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran 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 2 daripada 4.

Berapa lamakah pelajaran “Gaya, 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 CSS Academy ini?

Ya. Setiap pelajaran 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

Memahami Lebar, Tinggi, Margin dan Padding
Gaya, Lebar dan Warna Sempadan
Box-Sizing: Content-Box berbanding Border-Box
Garis Luar dan Bayang Kotak

← Kembali ke CSS Academy