border-radius 画半圆或椭圆需用斜杠语法分别控制水平/垂直半径，50% 是相对宽高的百分比，非固定值；单写 50% 在正方形中得圆、长方形中得椭圆，但四角均生效；可靠半圆需显式设底角垂直半径为 0，椭圆需宽高比匹配且四角协同撑满。
能画，但必须理解 border-radius 的双参数机制和尺寸依赖关系——它不是“画图工具”，而是“角部裁切规则”。直接设 50% 只在特定宽高比下才出半圆；椭圆必须用斜杠分隔的两组值，且不能脱离容器尺寸独立存在。
为什么 border-radius: 50% 有时是圆、有时是椭圆、有时又不是半圆
因为 50% 是相对值：水平方向按元素宽度解析，垂直方向按元素高度解析。当宽高不等时，50% 生成的是水平半径 = 宽/2、垂直半径 = 高/2 的椭圆；当只写一个值（如 50%），它会复制为四角统一的「水平/垂直」半径对，即等效于 50% / 50%。
常见误判点：
- 以为
border-radius: 50%+width: 200px; height: 100px就能得标准半椭圆 —— 实际得到的是完整椭圆（上下左右全圆角） - 把半圆当成“上半部分”，却没控制底部两个角为直角 —— 必须显式归零底部的垂直半径
- 用固定像素值（如
100px / 50px）做响应式布局 —— 尺寸一变，形状就塌
border-radius 画半圆的两种可靠写法
关键：顶部两个角保留弧度，底部两个角强制“无圆角”。必须用斜杠语法拆开水平与垂直半径，并分别控制每角。
沿横轴劈开的半圆（上凸形）：
.semi-circle-top {
width: 200px;
height: 100px;
background: #4CAF50;
border-radius: 50% / 100% 100% 0 0;
}
沿纵轴劈开的半圆（左凸形）：
.semi-circle-left {
width: 200px;
height: 100px;
background: #2196F3;
border-radius: 100% 0 0 100% / 50%;
}
说明：
-
50% / 100% 100% 0 0表示：四个角的水平半径都是50%（即宽的一半），垂直半径依次为100%（高）、100%、0、0 -
100% 0 0 100% / 50%表示：水平半径为100%、0、0、100%，垂直半径统一为50%（即高的一半） - 百分比在这里才真正自适应：宽变，水平半径自动重算；高变，垂直半径自动重算
画椭圆必须用斜杠语法，且宽高比决定最终形态
单写 border-radius: 50% 在正方形里出圆，在长方形里出椭圆，但那是“四个角都椭圆”的完整封闭图形；要得到**单个平滑椭圆轮廓**，需让整个元素变成“仅由一个椭圆角定义的矩形裁切区”——也就是宽高比匹配、且四角半径协同撑满。
标准椭圆写法（推荐）：
.ellipse {
width: 300px;
height: 120px;
background: #FF5722;
border-radius: 150px / 60px;
}
或更健壮的百分比写法（适配内容变化）：
.ellipse-auto {
width: 300px;
height: 120px;
background: #9C27B0;
border-radius: 50% / 50%;
}
注意：
-
150px / 60px是硬编码，仅当宽高严格为300px × 120px时才精准；换尺寸就得重算 -
50% / 50%看似一样，实则水平半径 =150px，垂直半径 =60px，结果相同，但可维护性更好 - 如果元素宽高由内容撑开（如
display: inline-block且内含文字），%值仍有效，但需确保父容器有明确尺寸约束，否则百分比可能退化为0
最容易被忽略的兼容性与渲染细节
border-radius 画椭圆/半圆在所有现代浏览器中都支持，但有三个隐性陷阱：
- 当任意角的水平+垂直半径之和超过对应边长时，浏览器会自动缩放半径防止重叠 —— 这意味着你设的
100% / 100%不一定真达到边界，尤其在窄高容器中 - 使用
background-clip: padding-box（默认值）时，背景色填充区域受圆角裁切；若改用content-box，可能露出直角背景 - 图片应用
border-radius时，圆角只作用于盒模型，不裁剪图片本身 —— 要真正椭圆图片，得套一层overflow: hidden容器
最后提醒：这些形状本质是“带圆角的矩形”，不是 SVG 路径。想做旋转、描边、透明镂空或精确矢量控制，border-radius 就力不从心了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
