border-radius没效果主因是元素无背景或边框、宽高不等导致50%成椭圆、父容器overflow:hidden裁剪、table等特殊元素不支持，需配background-color、固定尺寸、overflow:hidden包裹或统一单位值。
直接用 border-radius 就行，但多数“没效果”不是写错了，而是漏了关键前提。
为什么写了 border-radius 却看不到圆角
圆角本身是盒模型的裁剪边界，不是“画上去的装饰”，所以它只在有可见内容区域时才显现：
- 元素没有
background-color或border—— 圆角已生效，但背景透明，你根本看不见 -
<img>没设固定且相等的width和height——border-radius: 50%在长宽不一时生成椭圆，不是 bug，是规范行为 - 父容器设了
overflow: hidden，但子元素用了position: absolute越界 —— 圆角被父容器硬裁掉 - 表格（
<table>）直接加 <code>border-radius基本无效，因为border-collapse: collapse会压制圆角渲染border-radius的值怎么填才不翻车单位混用、顺序错位、数值超限都会导致意料外结果：
- 单值写法：
border-radius: 8px→ 四角统一为 8px，最常用也最安全 - 四值写法：
border-radius: 4px 8px 12px 16px→ 顺时针：左上、右上、右下、左下，别记反顺序 - 双值写法：
border-radius: 10px / 20px→ 斜杠前是水平半径，斜杠后是垂直半径，专用于椭圆角 - 百分比慎用：
border-radius: 50%只在宽高相等时才是正圆；若元素尺寸动态变化（如width: 100%+height: auto），结果不可控 - 避免混用：
border-radius: 4px 50%在 flex 容器里部分浏览器解析异常，统一单位更稳
特殊元素要单独处理
<img>、<table>、<code><button></button>这些元素对border-radius的响应逻辑不同：-
<img>：现代浏览器支持直接加border-radius，但必须配display: block+ 明确的等宽高等高（如width: 60px; height: 60px）+object-fit: cover防拉伸 <table>：别给 <code><table> 本身设圆角，套一层 <code><div class="table-wrapper">，对 wrapper 设 <code>border-radius+overflow: hidden才可靠-
<button></button>：部分浏览器保留原生边框，需显式写border: none或background-clip: padding-box，否则圆角会被边框盖住 -
<ul></ul>：完全支持border-radius，但若只设border: transparent仍不可见，必须配background-color或非透明border
最容易被忽略的是：圆角不占空间，但加上
border或box-shadow后，若没设box-sizing: border-box，容器实际尺寸会变大，悄悄破坏布局。 - 单值写法：
