边框圆角

边框圆角

1.什么是边框圆角?

将直角的边框变为圆角的边框

 

2.边框圆角的格式?

border-radius: 左上 右上 右下 左下;

 

3.将正方形变为圆形的技巧

border-radius: 50%;

 

4.系统如何绘制圆角?

首先根据指定的值找到圆心

按照指定的值作为半径绘制圆弧

绘制半圆
1 width: 200px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;  
6 border-radius: 100px 100px 0 0;

绘制椭圆
width: 400px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 300px auto;
/*绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半*/
border-top-left-radius: 200px 100px;
border-top-right-radius: 200px 100px;
border-bottom-left-radius: 200px 100px;
border-bottom-right-radius: 200px 100px;

<div class="all">
    <!--上面的半圆-->
    <div class="top"></div>
    <!--下面的半圆-->
    <div class="bottom"></div>
    <!--左边的小圆-->
    <div class="left"></div>
    <!--右边的小圆-->
    <div class="right"></div>
</div>
 
 
　　　　　　.all{
　　　　　　　　width: 400px;
　　　　　　　　height: 400px;
   　　　　　　border: 1px solid #000;
   　　　　　　box-sizing: border-box;
   　　　　　　margin: 200px auto;
   　　　　　　position: relative;
    　　　}
        .top{
            width: 400px;
            height: 200px;
            background: red;
            border-top-left-radius: 200px 200px;
            border-top-right-radius: 200px 200px;
        }
        .bottom{
            width: 400px;
            height: 200px;
            background: skyblue;
            border-bottom-left-radius: 200px 200px;
            border-bottom-right-radius: 200px 200px;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            border: 80px solid skyblue;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 100px;
        }
        .right{
            width: 200px;
            height: 200px;
            background: skyblue;
            border: 80px solid red;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 100px;
        }