Home > Article > Web Front-end > How to quickly and easily draw various ellipses using css3
In the past, when developing front-end, for those special graphics, most front-end developers would use picture cropping to insert special graphics. But now with the development of css3, many shapes can be drawn through css3. This book The content of this article is about how to quickly and easily use CSS3 to draw various ellipses. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The principle of using css3 to draw various ellipses
We need to use the border-radius attribute in css3 to modify the width value is 200px, and then change the border-radius to 100px / 50px; the one before "/" is the horizontal radius, and the one after "/" is the vertical radius, so 100px / 50px makes the div an ellipse. border-radius: 100px/50px;
Since we need to use the border-radius attribute in css3, today we will take you to learn more about the border-radius attribute.
border-radius attribute
Meaning: The shorthand attribute of border-radius attribute adds a rounded border to the element.
Syntax: border-radius: 1-4 length|% / 1-4 length|%;
Browser compatibility: IE9 , Firefox 4, Chrome, Safari 5 and Opera support the border-radius attribute.
Code to draw various ellipses using 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>Example The effect is as shown in the picture
##Application: Use css3 to draw an ellipse and then insert the picture
<!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>
The example effect is as shown in the picture
The above is the detailed content of How to quickly and easily draw various ellipses using css3. For more information, please follow other related articles on the PHP Chinese website!