Kaedah: 1. Gunakan atribut lebar dan tinggi untuk menetapkan elemen kepada segi empat tepat dengan nilai ketinggian lebih besar daripada nilai lebar 2. Gunakan atribut "jejari sempadan" untuk menetapkan elemen segi empat tepat kepada a elips dengan sudut atas dan bawah yang tajam, hanya Anda perlu menambah gaya "jejari sempadan:100%;" pada elemen segi empat tepat.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melukis elips dengan sudut tajam atas dan bawah dalam css
Dalam css, anda boleh menggunakan atribut lebar dan tinggi untuk melukis segi empat tepat dahulu, di mana lebar menetapkan segi empat tepat Sifat lebar dan ketinggian menetapkan ketinggian segi empat tepat. Menetapkan ketinggian segi empat tepat lebih besar daripada lebar segi empat tepat. Kemudian gunakan penyataan jejari sempadan:100% untuk menetapkan segi empat tepat lebar, pendek dan tinggi menjadi elips, iaitu elips dengan sudut atas dan bawah.
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: 100px;
height: 200px;
border:1px solid #000000;
border-radius:100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Cara melukis elips dengan sudut tajam atas dan bawah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
