Home > Article > Web Front-end > How to quickly and easily draw various ellipses using css3

How to quickly and easily draw various ellipses using css3

坏嘻嘻Original: 2018-09-29 10:30:495847browse

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

How to quickly and easily draw various ellipses using css3

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

firefox chrome safari css3 Length border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css3 to achieve rounded corners effect (with example code)Next article：How to use css3 to achieve rounded corners effect (with example code)

See more

How to quickly and easily draw various ellipses using css3

Related articles