This time I will show you how to addrounded borders to border-radius elements, what are theprecautionsfor adding rounded borders to border-radius elements, the following is the actual combat Let’s take a look at the case.
border-radius:10px; /* All corners are rounded with a radius of 10px*/
border-radius: 5px 4px 3px 2px; /* The four radius values are the upper left Corner, upper right corner, lower right corner and lower left corner, clockwise*/
Don’t think that the value of border-radius can only be in px units. You can also use percentages or ems, but the compatibility is not very good yet. .
Solid upper semicircle:
Method: Set the height (height) to half the width (width), and only set the radius of the upper left corner and upper right corner to be consistent with the height of the element (greater than also OK).
div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ }
Solid circle:
Method: Set the width (width) and height (height) values to be consistent (that is, a square), and set the four rounded corner values to their values. half.
The following code:
div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }
border-radius
I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to the php Chinese websiteOtherrelated articles!
Related reading:
How to use h5’s sse server to send EventSource events
H5’s local storage and local database details Introducing
#h5 how to implement the remember password function
The above is the detailed content of border-radius How to add rounded borders to elements. For more information, please follow other related articles on the PHP Chinese website!