CSS - Bujur Singkir: Panduan Pemula
Haih, rakan-rakan yang mahu menjadi pengguna web! Hari ini, kita akan melantikan masuk ke dunia yang menarik bujur singkir CSS. Sebagai guru komputer di lingkungan anda, saya disini untuk membimbing anda melalui perjalanan ini, langkah demi langkah. Jadi, ambil minuman kegemaran anda, betulkan kedudukan, dan mari kita buat bujur-bujur yang tajam menjadi licin!
Apa Itu Bujur Singkir?
Sebelum kita melompat ke kod, mari berbicara tentang apa sebenarnya bujur singkir. Bayangkan anda ada satu kertas persegi. Sekiranya anda hendak memotong bujur-bujurnya dengan pisau, anda akan mendapat bujur singkir. Itu betul yang kita akan lakukan kepada elemen web kita, tetapi secara digital!
Properti Magik: border-radius
Dalam CSS, kita menggunakan properti border-radius untuk membuat bujur singkir. Itu seperti pasang pisau digital kita! Mari lihat bagaimana kita boleh menggunakannya.
Sintaks Asas
.rounded-box {
border-radius: 10px;
}Baris kod ini akan membulatkan empat bujur-bujur elemen kita sebanyak 10 piksel. cukup menarik, kan?
Nilai Yang Mungkin
Sekarang, mari eksplor bagaimana kita boleh menggunakan border-radius. Itu seperti memiliki jenis-jenis pisau berbeza di dalam alat kita!
| Jenis Nilai | Contoh | Keterangan |
|---|---|---|
| Panjang | 20px |
Nyatakan radius dalam piksel |
| Peratusan | 10% |
Radius relatif kepada saiz elemen |
| Awal | initial |
Tetapkan kepada nilai default |
| Warisi | inherit |
Warisi daripada elemen induk |
Nilai Panjang
.slightly-rounded {
border-radius: 5px;
}
.very-rounded {
border-radius: 20px;
}Dalam contoh ini, kita menggunakan nilai piksel. Semakin besar nombor itu, semakin bulat bujur-bujurnya menjadi!
Nilai Peratusan
.responsive-rounded {
border-radius: 10%;
}Menggunakan peratusan adalah idea bagus untuk reka letak responsif. Kekurangan bulat akan disesuaikan berdasarkan saiz elemen!
Terpakai Pada
Bukan segala-galanya boleh memiliki bujur singkir (adakahnya itu akan menyenangkan juga?). Berikut adalah apa yang kita boleh bulatkan:
- Elemen aras blok
- Elemen aras inline-block
- Elemen jadual
- Beberapa elemen pengganti (seperti imej)
Sintaks DOM
Untuk mereka yang curi tahu tentang memanipulasi bujur singkir dengan JavaScript, ini adalah bagaimana anda boleh melakukannya:
object.style.borderRadius = "10px";Ini menetapkan border-radius kepada 10 piksel menggunakan JavaScript. Itu seperti menggunakan pasang pisau yang boleh diprogram!
CSS Border Radius - Nilai Panjang
Mari kita tingkatkan. Kita sebenarnya boleh menentukan radius berbeza untuk setiap bujur!
.fancy-box {
border-radius: 10px 20px 30px 40px;
}Ini menetapkan bujur kiri atas kepada 10px, bujur kanan atas kepada 20px, bujur kanan bawah kepada 30px, dan bujur kiri bawah kepada 40px. Itu seperti memiliki empat pasang pisau berbeza!
CSS Bujur Singkir Imej
Anda tahu kita boleh bulatkan bujur imej juga? Itu seperti memberikan rambut gaya kepada gambar anda!
.rounded-image {
border-radius: 50%;
}Ini akan mengubah imej segi empat anda menjadi bulatan sempurna. Bagus untuk gambar profil!
CSS border-radius - Properti Berkaitan
Border-radius mempunyai beberapa teman di dunia CSS. Mari kenal mereka:
| Properti | Keterangan |
|---|---|
| border-top-left-radius | Bulatkan bujur kiri atas |
| border-top-right-radius | Bulatkan bujur kanan atas |
| border-bottom-right-radius | Bulatkan bujur kanan bawah |
| border-bottom-left-radius | Bulatkan bujur kiri bawah |
Properti ini membolehkan anda menargetkan bujur-bujur khusus. Itu seperti memiliki pisau presisi!
.partially-rounded {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}Ini akan bulatkan hanya bujur kiri atas dan bujur kanan bawah. Sempurna untuk mencipta bentuk unik!
Contoh Praktikal: Mencipta gelembung ucapan
Mari kita gunakan pengetahuan baru kita dan buat gelembung ucapan yang mudah:
.speech-bubble {
background-color: #f0f0f0;
border-radius: 20px;
padding: 20px;
position: relative;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 20px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #f0f0f0 transparent;
}Di sini, kita menggunakan border-radius untuk bulatkan gelembung utama, dan kemudian mencipta三角形 kecil dengan pseudo-element ::after untuk membuat ia kelihatan seperti gelembung ucapan. Itu seperti digital origami!
Kesimpulan
Dan di situ anda ada, rakan-rakan! Kita telah melalui dasar bujur singkir CSS. Ingat, reka letak web adalah tentang eksperimen. Jangan takut untuk main-main dengan properti ini dan lihat apa jenis reka letak menarik yang anda boleh hasilkan!
Bila anda menyelari web, lihat bujur-bujur yang bulat yang anda lihat. Sekarang anda tahu rahsia di belakang mereka! Terus latih, dan segera anda akan menjadi tuan bujur-bujur licin di dunia digital.
Selamat mengoding, dan mayat semua bujur-bujur anda menjadi licin seperti yang anda mahu!
Credits: Image by storyset