课堂笔记：CSS 图形绘制与表单布局实战

课程主题：CSS 高级应用 —— 精准绘制扇形 & 表单结构优化

适用场景：前端入门进阶 / 博客复盘 / 面试复习

---

一、核心知识点总结

1️⃣ CSS 绘制“四分之一圆扇形”（单角圆弧）

需求特征：

• 正方形容器

• 仅 左下角 为圆弧

• 右上角 为直角

• 内部包含居中的数字或图标

核心代码：

1

.sector {
width: 200px;
height: 200px;
background-color: #e60012; /* 正红色 */

/* 关键属性：仅左下角圆角 */
border-bottom-left-radius: 200px;

/* 其余三角强制直角 */
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;

/* 内容居中 */
display: flex;
justify-content: center;
align-items: center;

font-size: 72px;
font-weight: bold;
color: #000;
font-family: "Microsoft YaHei", Arial, sans-serif;
}

技术要点：

• border-*-radius 只对指定角生效，其余角默认为 0

• 圆角数值等于容器宽高时，形成标准四分之一圆

• flex 布局是实现内容居中的最优解

---

2️⃣ 表单布局规范（登录/注册通用结构）

HTML 结构：

Header

用户名

密码

性别
男
女

CSS 样式：

.login-form {
width: 400px;
margin: 20px auto;
font-family: "Microsoft YaHei", Arial, sans-serif;
border: 1px solid #ccc;
padding: 20px;
background: #fff;
}

.form-header {
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 10px 0;
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
}

.form-row {
display: flex;
align-items: center;
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 8px;
border-radius: 4px;
}

.form-row label {
width: 80px;
text-align: right;
margin-right: 10px;
font-weight: bold;
}

.form-row input[type="text"],
.form-row input[type="password"] {
flex: 1;
padding: 6px;
border: none;
outline: none;
}

.form-row input[type="radio"] {
margin-right: 4px;
}

布局要点：

• 使用 flex 实现标签与输入框的水平对齐

• 固定 label 宽度，保证视觉整齐

• 输入框去除默认边框，由父级 .form-row 统一控制边框

• 单选框通过包裹 提升点击体验

---

二、今日重点回顾

✅ 掌握 border-*-radius 的精准用法

✅ 理解“单角圆弧 ≠ 正圆”的图形逻辑

✅ 熟练使用 Flexbox 进行表单对齐

✅ 建立“结构语义化 + 样式分层”的开发思维