How to quickly and easily draw various ellipses using css3-CSS Tutorial-php.cn

How to quickly and easily draw various ellipses using css3

坏嘻嘻

Release： 2018-09-29 10:30:48

Original

5882 people have browsed it

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>

Copy after login

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>

Copy after login

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!