Rumah >hujung hadapan web >tutorial css >Bagaimana untuk melukis separuh bulatan kanan dalam css
Kaedah: 1. Tambahkan gaya "lebar: nilai lebar; ketinggian: nilai ketinggian;" dan tetapkan elemen itu kepada segi empat tepat yang lebarnya ialah separuh daripada ketinggian; : 0 segi empat tepat" kepada elemen Nilai lebar nilai lebar segi empat tepat 0;" gaya, tetapkan sudut bulat ke segi empat tepat, dan kemudian tetapkan segi empat tepat kepada gaya separuh bulatan kanan.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melukis separuh bulatan kanan dalam css
Dalam css, anda boleh mencipta elemen segi empat tepat yang lebarnya separuh tinggi contoh adalah seperti berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 50px; height: 100px; background-color:red; } </style> </head> <body> <div></div> </body> </html>
Hasil keluaran:
Kemudian gunakan atribut jejari sempadan untuk menetapkan gaya sudut bulat di sebelah kanan, dan tetapkan nilai sudut bulat menjadi sebesar nilai lebar . Contohnya adalah seperti berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 50px; height: 100px; background-color:red; border-radius: 0 50px 50px 0; } </style> </head> <body> <div></div> </body> </html>
Hasil output:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk melukis separuh bulatan kanan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!