Dalam proses pembuatan halaman web, terkadang kita mungkin perlu mendapatkan efek sudut membulat. Cara sebelumnya adalah dengan memotong rancangan desain menjadi gambar yang dapat dengan mudah dibuat menjadi halaman dan menggunakan beberapa gambar latar belakang untuk mendapatkan sudut membulat. Setelah munculnya CSS3, tidak perlu ada masalah seperti itu. CSS3 menyediakan serangkaian properti untuk mengatur efek sudut membulat pada elemen, seperti yang ditunjukkan di bawah ini:
Nilai opsional dari fungsi di atas ditunjukkan pada tabel berikut:
border-radius digunakan untuk mengimplementasikan batas bulat.
Contoh:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ tubuh></html>Hasil berjalan:
Tetapi jika saya mengatur border-radius menjadi 150px, itu akan menjadi perbatasan melingkar
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ tubuh></html>Hasil berjalan:
Untuk kenyamanan, cukup atur radius batas menjadi 50%. Efeknya sama.
Namun jika ingin menggambar lingkaran, lebar dan tingginya harus sama.
Faktanya, beberapa nilai atribut dapat dihubungkan setelah radius batas. Untuk nilai atribut seperti di atas, keempat sudut akan default ke nilai atribut ini. Jika keempat nilai atribut jelas relatif terhadap keempat sudut, apa metode relatifnya? Dimulai dari pojok kiri atas dan searah jarum jam.
Contoh:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></tubuh></html>Hasil berjalan:
Sebagai contoh, mari menggambar telur:
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></tubuh></html>Hasil berjalan:
