Heim >Web-Frontend >CSS-Tutorial >Wie zeichnet man in CSS eine Ellipse mit oberen und unteren scharfen Ecken?
Wie zeichnet man in CSS eine Ellipse mit oberen und unteren scharfen Ecken?
- WBOYOriginal
- 2021-12-03 13:51:081989Durchsuche
Methode: 1. Verwenden Sie die Attribute width und height, um das Element auf ein Rechteck mit einem Höhenwert festzulegen, der größer als der Breitenwert ist. 2. Verwenden Sie das Attribut „border-radius“, um das rechteckige Element auf eine Ellipse mit scharfer Oberkante festzulegen und untere Ecken Geben Sie einfach das rechteckige Element an. Fügen Sie einfach den „border-radius:100%;“ hinzu.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zeichnen Sie eine Ellipse mit oberen und unteren scharfen Ecken in CSS
In CSS können Sie zunächst die Attribute width und height verwenden, um ein Rechteck zu zeichnen, wobei die Breite die Breite des Rechtecks festlegt, und die Das Höhenattribut legt die Höhe des Rechtecks fest. Legt fest, dass die Höhe des Rechtecks größer als die Breite des Rechtecks ist. Verwenden Sie dann die Anweisung „border-radius:100%“, um das Breiten-, Kurz- und Höhenrechteck in eine Ellipse umzuwandeln, also eine Ellipse mit oberen und unteren Ecken.
Das Beispiel sieht wie folgt aus:
<!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>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie zeichnet man in CSS eine Ellipse mit oberen und unteren scharfen Ecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!