CSS3 properti border-radius
contoh
elemen div menambahkan perbatasan bulat:
{
border:2px solid;
border-radius:25px;
}
Coba »
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
| milik | |||||
|---|---|---|---|---|---|
| border-image | 4.0 -webkit- | 9.0 | 4.0 moz | 5.0 -webkit- | 10,5 -o- |
Definisi atribut dan petunjuk
Properti border-radius adalah bisa menentukan hingga empat perbatasan - * - sifat radius sifat komposit
Catatan: Properti ini memungkinkan Anda untuk menambahkan elemen perbatasan bulat!
| default: | 0 |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan object.style.borderRadius = "5px" |
tatabahasa
Catatan: Urutan keempat nilai masing-masing jari-jari adalah: kiri atas, kanan atas, pojok kanan bawah, pojok kiri bawah.Jika Anda menghilangkan sudut kiri bawah, sudut kanan atas adalah sama. Jika Anda menghilangkan sudut kanan bawah, sudut kiri atas adalah sama. Jika Anda menghilangkan sudut kanan atas, pojok kiri atas adalah sama.
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
contoh 1
adalah setara dengan:
border-top-kiri-radius: 2em;
border-top-kanan-radius: 2em;
border-bottom-kanan-radius: 2em;
border-bottom-kiri-radius: 2em;
contoh 2
adalah setara dengan:
border-top-kiri-radius: 2em 0.5em;
border-top-kanan-radius: 1em 3em;
border-bottom-kanan-radius: 4em 0.5em;
border-bottom-kiri-radius: 1em 3em;
Artikel terkait
CSS3 tutorial: CSS3 Border
