Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3-tutoriel CSS-php.cn

Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3

坏嘻嘻

Libérer： 2018-09-29 10:30:48

original

5834 Les gens l'ont consulté

Dans le passé, lors du développement front-end, pour ces graphiques spéciaux, la plupart des développeurs front-end utilisaient le recadrage d'images pour insérer des graphiques spéciaux. Mais maintenant, avec le développement du CSS3, de nombreuses formes peuvent être dessinées via CSS3. Le contenu de cet article explique comment utiliser rapidement et facilement CSS3 pour dessiner diverses ellipses. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le principe de l'utilisation de CSS3 pour dessiner diverses ellipses

Nous devons utiliser l'attribut border-radius en CSS3 pour modifier la valeur de largeur est 200px, puis changez le rayon de bordure en 100px / 50px ; celui avant "/" est le rayon horizontal, et celui après "/" est le rayon vertical, donc 100px / 50px fait du div une ellipse. : 100px/50px;

Puisque nous devons utiliser l'attribut border-radius en CSS3, nous allons aujourd'hui vous amener à en savoir plus sur l'attribut border-radius.

attribut border-radius

Signification : L'attribut raccourci de l'attribut border-radius ajoute une bordure arrondie à l'élément.
Syntaxe : border-radius : 1-4 length|% / 1-4 length|%;
Compatibilité navigateur : IE9+, Firefox 4+, Chrome, Safari 5+ et Opera prennent en charge l'attribut border-radius.

Code pour dessiner diverses ellipses en utilisant 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>

Copier après la connexion

L'exemple d'effet est montré sur la photo

Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3

Application : utilisez CSS3 pour dessiner une ellipse, puis insérez une image

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

Copier après la connexion

L'effet d'exemple est tel qu'indiqué dans le photo