Recently, the project has been refactored, and the interaction involved in one of the modules has been completely changed. There are many points linked to css. Here is a simple record.
To realize the circle, you must first know border-radiusthis attribute, citing the explanation on MDN:
The CSS property border-radius allows you to set the outer border of an element with rounded corners. Determines a circle when one radius is used, and an ellipse when two radii are used. The intersection of this (ellipse) circle and the border creates a rounded corner effect.
Simply put, the four corners of the border are controlled by this property. If the border needs rounded corners, it can be set directly, for example:
border-radius: 30px;
The effect is as follows:
Of course, the rounded corners of these four sides can also be freely combined and set, so I won’t give examples one by one here.
1. Circle
width: 100px;
height: 100px;
border-radius: 50%; // 等同于 border-radius: 50px;
The effect is as shown in the figure: (width 100px, height 100px)
One thing to note is that the width and height here must be the same, otherwise it will be an ellipse.
Like this: (width 100px, height 50px)
2. One-half circle (half circle)
border-radiusis a shorthand attribute, and its complete attributes are as follows:
border-radius: 30px;
/* 等价于： */
border-top-left-radius: 30px; // 左上角
border-top-right-radius: 30px; // 右上角
border-bottom-right-radius: 30px; // 右下角
border-bottom-left-radius: 30px; // 左下角
Note: The order of the four values for each radius is: top left, top right, bottom right, bottom left. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.
- upper semicircle
border-radius: 100px 100px 0 0;
width: 100px;
height: 50px;
The effect is as shown in the figure:
- right semicircle
border-radius: 0 50px 50px 0;
width: 50px;
height: 100px;
The effect is as shown in the figure:
- lower semicircle
border-radius: 0 0 100px 100px;
width: 100px;
height: 50px;
The effect is as shown in the figure:
- left semicircle
border-radius: 50px 0 0 50px;
width: 50px;
height: 100px;
The effect is as shown in the figure:
three quarter circle
When drawing a semicircle, we set two corners, then only one corner is required for a quarter circle.
- upper left
border-top-left-radius: 50px;
width: 50px;
height: 50px;
The effect is as shown in the figure:
- upper right
border-top-right-radius: 50px;
width: 50px;
height: 50px;
The effect is as shown in the figure:
- bottom right
border-bottom-right-radius: 50px;
width: 50px;
height: 50px;
The effect is as shown in the figure:
- lower left
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
Oh, this article mainly introduces a few relatively common circular shapes. As for others, we will continue to add them later.