Maison > Article > interface Web > Comment dessiner rapidement et facilement diverses ellipses en utilisant CSS3
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
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!