Hari ini kita belajar menggunakan teknologi CSS3 untuk mendapatkan sudut membulat tanpa memerlukan gambar. Kita dapat menggunakan CSS3 untuk mendapatkan efek sudut membulat pada latar belakang judul sidebar dan efek sudut membulat pada kotak pencarian. Rekam untuk digunakan nanti. W3C telah lama merumuskan properti CSS3 yang mengimplementasikan sudut membulat CSS: border-radius. Firefox dan Safari juga mengimplementasikan fungsi ini melalui properti pribadi:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox dan Safari menerapkan sudut membulat< /div>
Efeknya adalah sebagai berikut:
Diantaranya, -moz-border-radius adalah properti pribadi yang digunakan oleh Firefox untuk mengimplementasikan sudut membulat, dan -webkit-border-radius adalah properti pribadi yang digunakan oleh browser inti webkit (seperti Safari dan Chrome) untuk mengimplementasikan sudut membulat Anda hanya perlu menentukan bahwa sudut tertentu dibulatkan. Sedangkan untuk sudut, semuanya menentukan empat atribut:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-perbatasan-radius-kiri-bawah / -webkit-perbatasan-radius-kiri-bawah
-moz-perbatasan-radius-kanan-bawah / -webkit-perbatasan-radius-kanan-bawah
Tentu saja IE (termasuk IE8) masih belum mendukungnya, sehingga efeknya hanya dapat dilihat di Firefox, Safari, dan Chrome.