Home > Article > Web Front-end > border-radius How to add rounded borders to elements

border-radius How to add rounded borders to elements

php中世界最好的语言Original: 2018-01-20 09:35:222224browse

This time I will show you how to add rounded borders to border-radius elements, what are the precautions for 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;/*四个圆角值都设置为宽度或高度值的一半*/  
　　}

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>border-radius</www.dztcsd.com/title>  
<style type="text/css">  
div.circle{   
    height:100px;/*与width设置一致*/   
    width:100px;   
    background:#9da;   
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   
    }   
/*任务部分*/      
div.semi-circle{    
    height:100px;   
    width:50px;   
    background:#9da;   
    border-radius:?;   
    }   
      
</style>  
</head>  
<body>  
<div class="circle">  
</div>  
<br/>  
<!--任务部分-->  
<div class="semi-circle">  
</div>  
  
</body>  
</html>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!

border-radius How to add rounded borders to elements

Related articles