So zeichnen Sie schnell und einfach verschiedene Ellipsen mit CSS3-CSS-Tutorial-php.cn

So zeichnen Sie schnell und einfach verschiedene Ellipsen mit CSS3

坏嘻嘻

Freigeben： 2018-09-29 10:30:48

Original

5884 Leute haben es durchsucht

Während der Front-End-Entwicklung verwendeten die meisten Front-End-Entwickler in der Vergangenheit das Zuschneiden von Bildern, um spezielle Grafiken einzufügen. Mit der Entwicklung von CSS3 können jedoch viele Formen über CSS3 gezeichnet werden Der Inhalt dieses Artikels befasst sich mit der schnellen und einfachen Verwendung von CSS3 zum Zeichnen verschiedener Ellipsen. Ich hoffe, dass er für Freunde hilfreich ist.

Das Prinzip der Verwendung von CSS3 zum Zeichnen verschiedener Ellipsen

Wir müssen das Attribut border-radius in CSS3 verwenden, um den Breitenwert zu ändern 200px, und ändern Sie dann den Randradius in 100px / 50px; der vor „/“ ist der horizontale Radius und der nach „/“ ist der vertikale Radius, sodass 100px / 50px das Div zu einer Ellipse macht : 100px/50px;

Da wir das Attribut „border-radius“ in CSS3 verwenden müssen, erfahren Sie heute mehr über das Attribut „border-radius“.

border-radius-Attribut

Bedeutung: Das abgekürzte Attribut des border-radius-Attributs fügt dem Element einen abgerundeten Rand hinzu.
Syntax: border-radius: 1-4 length|% / 1-4 length|%;
Browserkompatibilität: IE9+, Firefox 4+, Chrome, Safari 5+ und Opera unterstützen das border-radius-Attribut.

Code zum Zeichnen verschiedener Ellipsen mit CSS3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
#rcorners1 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2{
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

Nach dem Login kopieren

Beispiel Der Effekt ist wie gezeigt im Bild

So zeichnen Sie schnell und einfach verschiedene Ellipsen mit CSS3

Anwendung: Zeichnen Sie mit CSS3 eine Ellipse und fügen Sie dann ein Bild ein

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img {   
    border-radius: 50%;   
}   
</style>  
</head>  
<body>  
<h2>椭圆形图片</h2>  
<p>使用 border-radius 属性来创建椭圆形图片：</p>  
<img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">  
</body>  
</html>

Nach dem Login kopieren

Der Beispieleffekt ist wie im Bild gezeigt

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie schnell und einfach verschiedene Ellipsen mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!