课堂随笔16

Web CSS 圆形制作完整知识点笔记（零基础版）

一、核心原理（必考）

1. 圆形本质

CSS 画圆只靠一个属性：

 border-radius: 圆角值;

• 正方形 + border-radius: 50% → 正圆
• 长方形 + border-radius: 50% → 椭圆

2. 底层原理

border-radius: 50%  的含义：
让盒子四个角圆角为自身宽高的一半

• 宽高相等（正方形）：四个圆角刚好拼接成完美圆形
• 宽高不等（长方形）：形成椭圆

口诀：正方50%变圆，长方50%变椭

二、标准正圆（最常用）

1. 必备两个条件

1. 盒子 宽高必须相等（正方形）
2. 设置 border-radius: 50%

2. 完整可直接使用代码

 
 .circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

三、椭圆制作

1. 条件

• 盒子宽高不相等
• border-radius: 50%

2. 示例代码

 .ellipse {
  width: 200px;
  height: 80px;
  background: skyblue;
  border-radius: 50%;
}

四、半圆制作（高频作业题）

1. 上半圆

原理：高度为宽度的一半 + 只保留上下圆角

 .half-top {
  width: 100px;
  height: 50px;
  background: orange;
  border-radius: 50px 50px 0 0;
}

2. 下半圆

```
.half-bottom {
width: 100px;
height: 50px;
background: green;
border-radius: 0 0 50px 50px;
}

 
3. 左半圆
 

.half-left {
width: 50px;
height: 100px;
background: pink;
border-radius: 50px 0 0 50px;
}

4. 右半圆

.half-right {
width: 50px;
height: 100px;
background: #666;
border-radius: 0 50px 50px 0;
}

 
border-radius 四值顺序（必须背）
 
左上 → 右上 → 右下 → 左下
 
 
 
五、圆角单独控制（细分用法）
 
可以单独设置某一个角圆角：
 
 ```
border-top-left-radius: 10px;    /* 左上角 */
border-top-right-radius: 10px;   /* 右上角 */
border-bottom-left-radius: 10px;/* 左下角 */
border-bottom-right-radius: 10px;/* 右下角 */

六、空心圆环（常用UI）

原理：背景透明 + 边框 + 正圆

 .ring {
  width: 100px;
  height: 100px;
  border: 5px solid red;
  border-radius: 50%;
  background: transparent;
}