Do you think border-radius is just rounded corners?【Various angles】

border-radius, translated into rounded corners in China, you may think that this property is used to draw rounded corners, yes, but in addition, it can do other things.

radius actually refers to the radius of the circle where the border is located. This CSS3 property can not only create rounded corners, but also elliptical corners (as shown in the figure below), and place these corners in different orders and sizes.Display, can be drawn into a variety of graphics.The following legend is the effect obtained by defining border-radius.

The main thing is to understand the horizontal radius and vertical radius: if there is a slash, the length of the horizontal radius before the slash, and the height of the vertical radius after the slash; without the slash, the horizontal radius is the same as the vertical radius.

div{margin:100px auto;width:400px;height:200px;border-radius:200px/100px;background:red;}

border-radius can be defined by value same-style corners, and also for each corner separately.The table below explains the effect represented by each notation.

1, border-radius: 100px will create four rounded corners of the same size

div{margin:100px auto;width:200px;height:200px;border-radius:100px;background:red;}

2, border-radius: 100px 150px 100px 50px; The four values ​​represent the upper left corner, upper right corner, lower right corner and lower left corner respectively.

The four values ​​represent the radii of the four corners respectively (Horizontal and vertical radii are the same)

div{margin:100px auto;width:200px;height:200px;border-radius: 100px 150px 100px 50px;background:red;}

3. border-radius: 100px 150px; The first value represents the upper left corner and the lower right corner; the second value represents the upper right corner and the lower left corner.

div{margin:100px auto;width:200px;height:200px;border-radius: 100px 50px;background:red;}

4, border-radius: 100px 150px 50px; The first value represents the upper left corner; the second value represents the upper right corner and the lower left corner; the third value represents the lower right corner.

div{margin:100px auto;width:200px;height:200px;border-radius: 100px 150px 50px;background:red;}

5, border-radius: 20px 40px 40px 80px/10px 30px 50px70px; A group of four values ​​in front of the slash represents the horizontal radius of the four corners respectively; a group of four values ​​after the slashEach value represents the vertical radius of the four corners.

div{margin:100px auto;width:200px;height:200px;border-radius: 20px 40px 60px 80px/10px 30px 50px 70px;background:red;}

6, border-radius: 10px 20px 40px/20px 50px Each group before and after the slash represents the horizontal radius of the four corners and the vertical radius of the four corners respectively.You know the order rules of two values ​​and three values, the same as above

div{margin:100px auto;width:200px;height:200px;border-radius: 10px 20px 40px/20px 50px;background:red;}