BAB 1: Perkenalan CSS Border Radius
Berikut ini ialah aba-aba CSS dasar untuk menciptakan imbas tumpul pada sudut-sudut area:-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Nilai
10px ialah ukuran radius ketumpulan sudut. Meskipun di sini Saya meletakkan properti -webkit-border-radius, -moz-border-radius dan border-radius sekaligus, namun intinya mereka semua memiliki kiprah yang sama persis. Setiap peramban memiliki prefiks border radius tersendiri:- -webkit-border-radius: Properti ini milik Safari dan Chrome. Jika Safari/Chrome tidak dapat membaca properti
border-radius, maka ia masih dapat membaca properti-webkit-border-radius. - -moz-border-radius: Properti ini milik Mozilla Firefox. Jika Firefox tidak dapat membaca properti
border-radius, maka ia masih dapat membaca properti-moz-border-radius. - border-radius: Ini ialah standar W3C. Suatu ketika semua peramban harus dapat membaca properti ini.
BAB 2: Dua Metode Pemecahan Sisi
Berikut ini ialah hasil-hasil tampilan penumpulan sudut pada semua peramban yang telah disebutkan di atas menurut deklarasi-deklarasi yang diletakkan di dalam area. Ada satu hal penting yang mungkin akan terjadi di sini. Kemungkinan besar kalian tidak akan melihat efek-efek penumpulan sudut pada satu atau dua pembagian tipe peramban dalam daftar area di bawah ini, alasannya ialah di sini Saya hanya menerapkan satu jenis prefiks pada masing-masing tipe peramban saja.Misalnya begini: Jika ketika ini kau sedang melihat halaman ini dengan peramban Mozilla Firefox, maka kemungkinan kau tidak akan melihat imbas penumpulan sudut pada grup Chrome dan Safari. Untuk melihat imbas penumpulan sudut pada grup Chrome dan Safari, maka kau harus melihat halaman ini dengan peramban tersebut.
| Spesifikasi W3C, Opera 10.5+ | |
|---|---|
| Metode 1: Dominasi Value | Metode 2: Dominasi Properti |
border-radius: 20px 20px 20px 20px; border-radius: 20px 0 0 0; border-radius: 0 20px 0 0; border-radius: 0 0 20px 0; border-radius: 0 0 0 20px; | border-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; |
| Mozilla Firefox | |
|---|---|
| Metode 1: Dominasi Value | Metode 2: Dominasi Properti |
-moz-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 0 0 0; -moz-border-radius: 0 20px 0 0; -moz-border-radius: 0 0 20px 0; -moz-border-radius: 0 0 0 20px; | -moz-border-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px; |
| Safari & Chrome | |
|---|---|
| Metode 1: Dominasi Value | Metode 2: Dominasi Properti |
-webkit-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 0 0 0; -webkit-border-radius: 0 20px 0 0; -webkit-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 0 20px; | -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; |
BAB 3: Penerapan Radius Asimetris
Untuk menerapkan hasil tampilan radius asimetris pada sudut-sudut area, digunakanlah budi sumbu-X dan sumbu-Y menyerupai ini:
Radius vertikal diartikan sebagai sumbu-Y, sedangkan radius horizontal diartikan sebagai sumbu-X. Karena di sini kita akan menerapkan dua value sekaligus, maka cara yang paling sempurna untuk menerapkannya ialah dengan memakai metode dominasi properti menyerupai ini:
div { -webkit-border-top-left-radius:(x) (y); -moz-border-radius-topleft:(x) (y); border-top-left-radius:(x) (y); }Jika aba-aba (x) diubah menjadi 50px dan (y) menjadi 20px maka akan menghasilkan penampilan area menyerupai ini:
-webkit-border-top-left-radius: 50px 20px;
-moz-border-radius-topleft: 50px 20px;
border-top-left-radius: 50px 20px;
-moz-border-radius-topleft: 50px 20px;
border-top-left-radius: 50px 20px;