border-radius四值顺序为左上、右上、右下、左下；只圆右侧需写0 12px 12px 0，椭圆弧度用斜杠分隔如20px/10px，伪元素可补全视觉弧度。
border-radius 四值写法控制侧边栏左右弧度不对称
直接用 border-radius 的四值语法就能让侧边栏只在特定边角带弧度，比如左边缘直角、右边缘圆润——这比套用整块“胶囊”或“全圆”更贴合真实布局需求。关键不是堆参数，而是理解顺序：左上、右上、右下、左下。
常见错误是把四个值当成“上下左右”来记，结果右上角没圆，左下角却意外变圆了。实际顺序固定为顺时针：从左上角开始，依次是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
- 侧边栏通常固定在容器左侧，高度撑满，所以顶部和底部的弧度需分别控制
- 若只要右上+右下带弧度（即右侧边缘整体圆滑），写成
border-radius: 0 12px 12px 0 - 若希望顶部平直、底部右下角微弧（模拟悬浮收口效果），可用
border-radius: 0 0 8px 0 - 注意单位一致性：px、rem、% 都可，但混用易导致响应式失效；百分比值基于元素自身宽高计算，对窄侧边栏可能过小
用斜杠语法做椭圆弧度适配侧边栏视觉重心
纯圆角有时太“硬”，尤其当侧边栏背景有渐变或阴影时，水平方向需要更舒展的弧度，垂直方向则要收敛些——这时就得用 border-radius 的斜杠语法：border-radius: horizontal / vertical。
比如一个 60px 宽的侧边栏，若设 border-radius: 30px / 8px，右上角会呈现横向拉长、纵向压扁的椭圆过渡，视觉上更轻盈，也避免小宽度下圆角“顶穿”内容区。
立即学习“前端免费学习笔记（深入）”；
- 斜杠前是水平半径（影响左右延展），斜杠后是垂直半径（影响上下延展）
- 四值+斜杠可共存，例如
border-radius: 0 20px/0 10px 20px/10px 0 0：左上无弧，右上椭圆（20px/10px），右下椭圆（20px/10px），左下无弧 - 旧版 Safari 对斜杠语法支持不稳定，如需兼容 iOS 14 以下，建议降级为单值圆角或 JS 动态检测
伪元素补弧解决 border-radius 无法覆盖侧边栏外轮廓的问题
单纯给侧边栏容器加 border-radius 只能修饰其自身盒模型，一旦内部有子元素（如菜单项、图标、分割线）溢出边界，弧度就会被“切掉”。这时候不能靠加大父容器圆角硬扛，得用伪元素向外延伸弧形。
典型做法是用 ::before 在右上角伪造一个绝对定位的椭圆块，背景与侧边栏一致，并设置 border-top-right-radius 和 transform: translateY(-50%) 微调位置。它不参与文档流，却能“盖住”直角接缝。
- 必须给侧边栏设
position: relative，否则伪元素会相对于 body 定位 - 伪元素尺寸不宜过大，一般宽高取 16–24px 足够衔接，过大易遮挡相邻 UI 元素
- 不要用
box-shadow模拟弧度——阴影是投影，无法真正遮挡直角边缘 - 如果侧边栏使用了
overflow: hidden，伪元素会被裁剪，此时需将伪元素提到父容器层级或改用clip-path
border-radius 与 clip-path 混用时的渲染优先级陷阱
当侧边栏同时用了 border-radius 和 clip-path（比如想切出更自由的曲线），别假设它们会叠加生效。CSS 渲染中 clip-path 优先级更高，会直接裁掉 border-radius 已经画好的圆角。
也就是说，如果你写了 border-radius: 12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)，最终看到的还是直角——因为 clip-path 把圆角区域整个剪掉了。
- 真要混用，必须让
clip-path显式包含弧度逻辑，例如clip-path: path("M0,0 Q12,0 12,12 L100%,12 L100%,calc(100% - 12) Q100%,100% 100% - 12,100% Z") - 更稳妥的做法是只选一种：简单弧度用
border-radius，复杂曲线（如波浪、S 形）才上clip-path - 所有现代浏览器对
border-radius的硬件加速支持良好，而clip-path特别是path()在低端 Android 设备上可能触发重绘卡顿
侧边栏弧度看似只是视觉细节，但一旦涉及滚动、悬停、子元素溢出或动画，border-radius 的数值组合、伪元素定位精度、以及它和 clip-path 或 overflow 的交互，就很容易在某个缩放比例或设备上突然崩出直角。动手前先在 DevTools 里勾选 “Toggle element screenshot”，看弧度是否真的落在像素边界内。
