如何将高度自适应toast的border-radius设置为高度的一半？
思否 问答 已采纳 👍 3 含 AI 优化版
问题
如何将高度自适应toast的border-radius设置为高度的一半？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
提问者希望实现一个高度自适应的 toast 组件，效果是圆角（border-radius）始终等于高度的一半，从而呈现「胶囊」形状。但由于高度不固定，无法预先写死具体的 px 数值。
涉及技术
CSS
期望结果
无需 JS 计算高度，仅用 CSS 就能让 border-radius 始终等于元素高度的一半，形成胶囊形状。
回答
原始回答
设置一个极大值就好了border-radius:999999px; demo
AI 优化 · 回答整理
解答思路
不需要精确计算高度的一半，只要把 border-radius 设置成一个足够大的数值（远超过元素实际高度），浏览器会自动把它截断到「高度的一半」，效果等同于胶囊形状。
示例代码
.toast {
border-radius: 999999px;
}
详细说明
CSS 规范中，border-radius 的圆角半径存在一个隐式上限：当水平或垂直方向的半径之和超过对应边长时，浏览器会按比例缩小圆角，使其不超过边框的一半。因此只要设置一个极大值（如 999999px），无论元素高度如何变化，圆角都会被自动约束为「高度的一半」，无需 JS 动态计算。
小结
利用 CSS border-radius 的自动截断特性，设置一个远大于实际尺寸的圆角值，即可让自适应高度的元素始终呈现胶囊形状。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault