CSS border-radius使用：为何给父容器.btn类添加圆角样式不生效？

• 首先.btn本身现在是个没有独立视觉渲染的空容器：现有样式里只写了定位规则、位置偏移、文本对齐属性，没有背景、边框、内边距这类能形成独立可见色块的属性。border-radius作用的是元素自身的渲染边界，当元素本身没有任何外露的视觉内容时，哪怕给它设100px的圆角，你也不可能从视觉上看到任何变化，这是你觉得“样式没生效”最直观的原因。
• 其次，父元素的border-radius根本不会自动裁剪子元素的渲染内容。不少人对圆角的作用逻辑有误解，觉得只要父级设了圆角，里面的子元素就会自动跟着变成对应圆角。但实际的CSS渲染规则是：只有当元素自身设置了非visible的overflow属性时，元素的圆角边界才会形成裁剪屏障，把内部超出圆角范围的子元素内容切掉。没有这条规则加持，子元素会沿着自己的矩形边界独立渲染，完全不受父元素圆角的影响。
• 结合你现在的代码，.btn是没显式设宽高的绝对定位元素，它的实际尺寸是完全被内部a标签撑开的，也就是说.btn的外边界和内部a标签的外边界刚好完全重合。这种情况下就算给.btn加了圆角，因为没有overflow:hidden的裁剪作用，内部a的背景色还是会沿着自己的矩形边角铺展，自然看起来就像圆角设置完全没生效。

• 如果你想通过父级.btn统一控制圆角效果，只需要在.btn的样式里加一行overflow: hidden，此时父元素的圆角边界就会变成有效的裁剪上下文，哪怕把.btn a里的border-radius删掉，内部按钮超出圆角范围的部分也会被父级的边界裁掉。
• 如果你想让圆角直接作用在.btn这个容器本身，需要给.btn补充对应的背景、内边距等属性，让它形成独立的可见色块，这时设置的圆角才会直接渲染在这个容器上，你才能直观看到效果。

补充提醒：后续如果给.btn加了内边距，让它的尺寸比内部a标签更大，不加overflow:hidden的话，内部a标签的直角背景还是会顶到父元素的圆角边角位置，依然会出现圆角看似失效的视觉问题。

内容的提问来源于stack exchange，提问作者jlee4641