border-top-left-radius 设置后没效果？先查这三件事
最常见的不是写法错，而是被其他样式覆盖或容器不支持。这个属性只对「有边框」或「有背景色」的块级元素生效，且父容器不能有 overflow: hidden（除非你真想裁掉圆角）。
-
border-top-left-radius不会改变元素尺寸，但可能让背景/边框在视觉上被截断——检查父级是否设置了overflow: hidden - 如果元素本身没边框（
border: none）又没背景色，圆角存在但看不见，加个background-color或border: 1px solid #000就能验证 - 在 Flex/Grid 子项中，某些旧版浏览器（如 Safari 12 之前）对
border-radius的渲染不一致，优先用px或em单位，避免纯百分比（如50%）在宽高不等时出怪形
单个拐角 vs 四个拐角：参数怎么填才不翻车
border-top-left-radius 是独立属性，但它和简写 border-radius 共享同一套计算逻辑。填错格式会导致整个圆角失效，尤其当混用单位时。
- 接受一个值：
border-top-left-radius: 8px（左上角 x/y 半径都是 8px） - 接受两个值：
border-top-left-radius: 12px 6px（第一个是水平半径，第二个是垂直半径） - 别写成
border-top-left-radius: 8px 8px 0 0——这是border-radius简写的语法，放在这里会被浏览器直接忽略 - 百分比值基于元素自身的 width/height 计算，不是父容器；如果元素宽高为 auto，百分比会退化为 0
和 border-radius 简写冲突时，谁赢？
简写 border-radius 会覆盖所有独立拐角属性，包括 border-top-left-radius，而且覆盖发生在声明顺序之后，不是“谁在后面谁生效”那么简单。
- 如果 CSS 中同时出现
border-top-left-radius: 10px和border-radius: 4px，后者会完全接管，左上角变成 4px - 但如果你写的是
border-radius: 4px 8px 12px 16px（顺时针：左上、右上、右下、左下），它只会覆盖对应位置，此时border-top-left-radius的值被忽略，但其他三个独立属性（如border-bottom-right-radius）仍可能生效——前提是它们没被同一条border-radius声明覆盖 - 调试技巧：在 DevTools 里看「Computed」面板，找
border-top-left-radius的实际解析值，而不是只盯「Styles」里的原始声明
圆角太大导致内容被裁剪？这不是 bug，是预期行为
当 border-top-left-radius 超过元素自身宽度或高度一半时，视觉上会出现“内凹”甚至内容被遮挡，尤其是配合 padding 或子元素 margin 使用时。
立即学习“前端免费学习笔记（深入）”；
- 例如一个
width: 100px; height: 40px的按钮，设border-top-left-radius: 60px，水平方向会超出一半，浏览器会把它压平到最大允许值（即 50px），但垂直方向只允许最多 20px，最终呈现的是椭圆弧而非正圆 - 子元素如果有
position: absolute且top: -5px，可能直接被圆角区域裁掉——这不是渲染错误，是border-radius定义的“绘制边界”本就包含裁剪语义 - 要保内容完整，要么减小圆角值，要么给容器加
padding预留空间，或者用clip-path替代（但兼容性差不少）
