Maison > Article > interface Web > Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3

Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3

坏嘻嘻original: 2018-09-29 10:30:495829parcourir

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>

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>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

firefox chrome safari css3 Length border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS3 pour obtenir un effet de coins arrondis (avec exemple de code)Article suivant：Comment utiliser CSS3 pour obtenir un effet de coins arrondis (avec exemple de code)

Articles Liés

Voir plus