border-radius失效

border-radius属性失效的原因可能是由于父元素设置了overflow:hidden属性，并且子元素使用了transform属性。在这种情况下，父元素的overflow:hidden属性会失效，导致border-radius属性无效。

解决这个问题的方法是使用!important来强制覆盖样式。你可以在border-radius属性的值后面添加!important，这样可以确保该样式优先生效。例如，你可以在父元素的border-radius属性后面添加!important;来强制生效。

另外，有时候即使设置了border-radius和overflow:hidden属性，预览时效果正常，但在真机上却无效。这可能是因为不同浏览器或设备对CSS属性的支持存在差异。在这种情况下，你可以尝试使用其他方法来实现圆角效果，例如使用背景图片或者使用伪元素来绘制圆角。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [border-radius 失效](https://blog.csdn.net/yang450712123/article/details/130943200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [border-radius属性失效问题的解决办法](https://blog.csdn.net/qq_36538012/article/details/83310390)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]