Bagaimana untuk melukis separuh bulatan kanan dalam css-tutorial css-php.cn

Bagaimana untuk melukis separuh bulatan kanan dalam css

WBOY

Lepaskan： 2021-12-06 11:46:14

asal

3610 orang telah melayarinya

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.

Bagaimana untuk melukis separuh bulatan kanan dalam css

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk melukis separuh bulatan kanan dalam css

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>

Salin selepas log masuk

Hasil output:

Bagaimana untuk melukis separuh bulatan kanan dalam css

(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!