边框圆角

什么是边框圆角？
----将直角的边框变为圆角的边框
边框圆角的格式？
----border-radious:左上右上右下左下；
将正方形变为圆形的技巧
border-radious:50%;
系统如何绘制圆角？
首先根据指定的值找到圆心，按照指定的值作为半径绘制圆弧；
边框圆角注意点
1、当某个省略角后系统会自动参考对角的值

.one{
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   box-sizing: border-box;
   margin: 100px auto;
   border-radius: 100px 50px 100px ;
  }

在这里插入图片描述

2、当只设置了一个值的时候，其他三个角都会参考这个值

.two{
   width: 200px;
   height: 200px;
   border: 50px solid #000;
   box-sizing: border-box;
   margin: 100px auto;
   border-radius: 100px;

在这里插入图片描述
3 当边框圆角的值》边框宽度的时候，外边框和内边框都会变为圆角
当边框圆角的值《边框宽度的时候，外边框和会变为圆角，内边距是直角

.two{
width: 200px;
height: 200px;
border: 50px solid #000;
box-sizing: border-box;
margin: 100px auto;
border-radius: 50px;
}
在这里插入图片描述

3 可以通过border-radious-xxx-xx-radious的方式单独设置某一个角的值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>半圆椭圆</title>
 <style>
  *{
   padding:0px;
   margin: 0px;
  }
  /*半圆1*/
  .one{
   width: 200px;
   /*height: 200px;*/
   /*高度减一半*/
   height: 100px;
   margin: 100px auto;
   border: 1px solid #000;
   box-sizing: border-box;
   border-radius:100px 100px 0 0;
  }
  /*半圆2*/
  .two{
    width: 200px;
   height: 200px;
   margin: 100px auto;
   border: 1px solid #000;
   box-sizing: border-box;
   /*水平方向 垂直方向
参数一样看前面的值做参考
*/
   border-top-left-radius:100px 100px;
  }
 </style>
</head>
<body>
 <div class="one"></div>
 <div class="two"></div>
</body>
</html>

绘制椭圆:设置水平方向为宽度的一半，设置垂直方向为高度的一半长方形变为椭圆

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>半圆椭圆</title>
 <style>
  *{
   padding:0px;
   margin: 0px;
  }
  /*半圆1*/
  .one{
   width: 200px;
   /*height: 200px;*/
   /*高度减一半*/
   height: 100px;
   margin: 100px auto;
   border: 1px solid #000;
   box-sizing: border-box;
   border-radius:100px 100px 0 0;
  }
  /*半圆2*/
  .two{
    width: 200px;
   height: 100px;
   margin: 100px auto;
   border: 1px solid #000;
   box-sizing: border-box;
   /*水平方向 垂直方向*/
   border-top-left-radius:100px 100px;
   border-top-right-radius:100px 100px;
  }
  .three{
    width: 400px;

   height: 200px;
   margin: 100px auto;
   border: 1px solid #000;
   box-sizing: border-box;
  border-top-left-radius:200px 100px;
   border-top-right-radius:200px 100px;
   border-bottom-left-radius:200px 100px;
   border-bottom-right-radius:200px 100px;
  }
 </style>
</head>
<body>
 <div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
</body>
</html>

在这里插入图片描述

猜你喜欢