cari

Rumah >hujung hadapan web >tutorial css >Cara melukis elips dengan sudut tajam atas dan bawah dalam css

Cara melukis elips dengan sudut tajam atas dan bawah dalam css

WBOY
WBOYasal
2021-12-03 13:51:081992semak imbas

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.

Cara melukis elips dengan sudut tajam atas dan bawah dalam css

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:

Cara melukis elips dengan sudut tajam atas dan bawah dalam css

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menukar gaya pemilihan tetikus biasa dengan cssArtikel seterusnya：Bagaimana untuk menukar gaya pemilihan tetikus biasa dengan css

Artikel berkaitan

Lihat lagi