26-边框圆角基本概念

2018-09-17 本文已影响0人晚溪呀

边框圆角的作用：将原始的直角变为圆角

*  格式:border-radius: 100px 0px 0px 0px;;
   按照左上/右上/右下/左下的顺序


*  格式:border-radius: 100px 80px 40px;
   按照左上/右上和左下/右下的顺序


*  格式:border-radius: 100px  40px;
   按照左上/右下和右上和左下的顺序


*  格式:border-radius: 100px ;
   如果省略三个参数, 其它角会和它一样


*  格式:border-radius: 50% ;
   如果指定的半径是当前元素宽高的一半, 那么就是一个圆形

单独绘制指定圆角和椭圆

单独指定某一个角的半径
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;

如果传递了两个参数, 那么第一个参数代表水平方向的半径, 第二个参数代表垂直方向的半径
border-top-left-radius:100px 50px;
border-top-right-radius:100px 50px;
border-bottom-left-radius:100px 50px;
border-bottom-right-radius:100px 50px;

每条边都设置50%就是一个圆形
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
简写：border-radius:50%;

 斜杠之前的代表左上/右上/右下/左下的水平方向的半径
 斜杠之后的代表左上/右上/右下/左下的垂直方向的半径
 border-radius:100px 100px 100px 100px/50px 50px 50px 50px;
 border-radius:100px/50px;

绘制半圆

如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角
```
 margin: 100px auto;
 width: 200px;
 height: 200px;
 border:100px solid #000;
 border-radius: 110px;
```

26-边框圆角基本概念

猜你喜欢

热点阅读