Bagaimana untuk menetapkan sempadan div dengan css

CSS ialah bahagian penting HTML dan digunakan untuk menggayakan halaman web. Antaranya, menetapkan sempadan div adalah salah satu fungsi CSS yang paling asas Ia boleh mengubah gaya sempadan, saiz, warna dan atribut lain div dalam halaman web, dengan itu menjadikan halaman web lebih cantik dan berhierarki. Artikel ini akan memperkenalkan secara terperinci cara menetapkan sempadan div dan menyediakan beberapa contoh praktikal untuk rujukan pembaca.

1. Helaian Gaya CSS

Sebelum kita mula mempelajari helaian gaya CSS, kita perlu memahami apa itu helaian gaya. Helaian gaya ialah satu set peraturan yang mentakrifkan gaya yang boleh digunakan pada elemen berbeza halaman web, seperti teks, pautan, gambar, jadual, dsb. Helaian gaya boleh dirujuk sebagai helaian gaya dalaman atau helaian gaya luaran ditulis terus dalam dokumen HTML, manakala helaian gaya luaran disimpan pada pelayan dalam bentuk fail CSS dan dirujuk oleh dokumen HTML.

2. Tetapkan sempadan div dengan CSS

Mari kami perkenalkan secara terperinci cara menetapkan sempadan div.

1. Tetapkan gaya sempadan

Terdapat banyak pilihan untuk gaya sempadan div, seperti garisan pepejal, garisan putus-putus, garisan putus-putus, dsb. Kita boleh menggunakan atribut gaya sempadan untuk menetapkan gaya sempadan Sintaks adalah seperti berikut:

div {
    border-style: solid;
}

Dalam contoh di atas, kami menetapkan gaya sempadan div kepada gaya sempadan lain yang tersedia adalah seperti berikut:

边框样式	描述
none	无边框
hidden	隐藏边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	双线边框
groove	3D凹边框
ridge	3D凸边框
inset	3D内边框
outset	3D外边框

2. Tetapkan saiz sempadan

Menetapkan saiz sempadan div juga sangat mudah. ​​Kita boleh menggunakan atribut lebar sempadan untuk menetapkan lebar sempadan . Nilai boleh menjadi piksel, peratusan atau saiz yang telah ditetapkan , contohnya:

div {
     border-width: 2px;
}

Dalam contoh di atas, kami menetapkan lebar sempadan div kepada 2 piksel.

3. Tetapkan warna jidar

Warna ialah salah satu elemen penting dalam CSS dan salah satu faktor utama dalam menetapkan sempadan div. Kita boleh menggunakan atribut warna sempadan untuk menetapkan warna sempadan Sintaks adalah seperti berikut:

div {
     border-color: red;
}

Dalam contoh di atas, kami menetapkan warna sempadan div kepada merah. Anda boleh menggunakan semua nilai warna ​disokong oleh CSS untuk menetapkan warna sempadan , seperti nama warna (merah, biru, hijau, dll.), nilai perenambelasan (#FF0000, #0000FF, dll.), nilai RGB (rgb(255, 0, 0), rgb(0, 0, 255)), dsb.

4. Tetapkan bucu bulat sempadan

Selain tiga atribut asas di atas, kita juga boleh menggunakan atribut jejari sempadan untuk menetapkan sudut bulat sempadan. Sintaksnya adalah seperti berikut:

div {
     border-radius: 10px;
}

Dalam contoh di atas, kami menetapkan jejari sudut sempadan div kepada 10 piksel. Anda juga boleh menetapkan saiz fillet setiap sudut sempadan, contohnya:

div {
     border-top-left-radius: 10px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 25px;
}

Dalam contoh di atas, kami menetapkan jejari fillet bagi empat penjuru sempadan div. Sudah tentu, anda juga boleh menetapkan hanya satu bucu bulat dalam satu arah.

3. Contoh menetapkan sempadan div dengan CSS

Berikut ialah beberapa contoh sempadan div praktikal untuk rujukan pembaca:

1

Tetapan di atas akan melukis sempadan hitam pejal dengan lebar 2 piksel di sekeliling div.

div {
     border-style: solid;
     border-width: 2px;
     border-color: black;
}

2. Jidar bertitik

Tetapan di atas akan melukis jidar bertitik merah dengan lebar 2 piksel di sekeliling div.

div {
     border-style: dashed;
     border-width: 2px;
     border-color: red;
}

3. Jidar bulat

Tetapan di atas akan melukis jidar biru pepejal dengan lebar 2 piksel dan jejari sudut 20 piksel di sekeliling div.

div {
     border-style: solid;
     border-width: 2px;
     border-color: blue;
     border-radius: 20px;
}

Sempadan 4.3D

Tetapan di atas akan melukis sempadan cekung 3D hijau dengan lebar 2 piksel di sekeliling div.

div {
     border-style: groove;
     border-width: 2px;
     border-color: green;
}

4. Ringkasan

Artikel ini memperkenalkan secara terperinci cara menggunakan CSS untuk menetapkan gaya sempadan div, saiz, warna dan atribut lain dan menyediakan beberapa contoh praktikal untuk rujukan pembaca. Dengan menguasai pengetahuan asas ini, pembaca boleh mereka bentuk gaya CSS dengan lebih baik dan menjadikan halaman web kelihatan lebih cantik dan berlapis.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sempadan div dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!