使用css3制作圆角图形

新学了用css3制作圆角图形，可能新学者可能不知道圆角的大小如何设置，那下面给大家讲解一下。

基本知识

（1）border-radius是css3新增加的属性，用来设置盒子的圆角。

表示法

• ​ 四值表示法：左上，右上，右下，左下（顺时针）如：border-radius: 10px 20px 30px 40px;
• ​ 单值表示法：四个角统一设置，如：border-radius: 10px;
• ​ 拆分表示法：
  • ​ 左上：border-top-left-radius: 20px;
  • ​ 右上：border-top-right-radius: 20px;
  • ​ 左下：border-bottom-left-radius: 20px;
  • ​ 右下：border-bottom-right-radius: 20px;
    属性值：可以是长度单位（如：px），可以是百分比。

（2）border-radius 还可以为每个角单独设置两个临界边的半径

• border-top-left-radius: top边半径 left边半径;
• border-top-right-radius: top边半径 right边半径;
• border-bottom-left-radius: bottom边半径 left边半径;
• border-bottom-right-radius: bottom边半径 right边半径;

border-radius是复合属性，可以将以上四个属性统一设置。

​ border-radius: 左上角top边半径 右上角top边半径 右下角bottom边半径 左下角bottom边半径 /左上角left边半径 右上角right边半径 右下角right边半径 左下角left边半径

​ 如：border-radius: 20px 40px 60px 80px / 30px 60px 90px 120px;

案例

下面是看案例，敲一遍就能明白了，我们来制作下面的图形

以第一个图片为例

1. 首先，我们找需要设置那些角 ：很明显，左上角和右下角。
2. 其次，我们发现左上角的上边距是其宽度的100%，左上角的左边距也是高度的100%
3. 那我们可以这样设置角（前提 盒子的宽度100px，高度200px）

 border-top-left-radius: 100px 200px;
 border-bottom-right-radius: 100px 200px;

或者

 border-top-left-radius: 100%;
 border-bottom-right-radius: 100%;

或者整体写

 border-radius: 100px 0 100px 0/200px 0 200px 0;

第一个图形完整代码如下

 .box1 {
   
    
    
            width: 100px;
            height: 200px;