CSS 边框的圆角

作者: 氢金 | 来源:发表于2019-07-19 16:36 被阅读0次

重点要记住：
border-radius半径（边框圆角使用）
border-radius：（左上,右上,右下,左下）（设置一个即四个角都应用，设置两个则对角应用）
border-radius：50%可以使用px与%

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框圆角</title>
        <style type="text/css">
            #box{
                width:200px;
                height:100px;
                border:3px solid red;
                /* border-radius:30px 40px 50px 60px;
                第一个左上,第二个右上,第三个右下,第四个左下 */
                /* border-radius:50%;
                设置圆形必须是正方形
                 */
                /* border-radius:50%;
                设置椭圆是正方形 */
                
                
                /* 结论:不仅可以使用 px也可以使用％号 */
                
                
            }
        
        </style>
        
    </head>
    <body>
        
        <div id="box">边框圆角<div>
            
        </div>
        
    </body>
</html>