📅  最后修改于: 2023-12-03 15:28:17.814000             🧑  作者: Mango
当使用 CSS 边框半径属性(border-radius)时,有时会发现设置好的圆角效果没有生效。这可能是因为以下原因:
圆角效果只对有宽度和高度的元素生效。如果元素没有设置宽度和高度,边框半径属性不会生效。因此,为了让边框半径属性正常工作,应该先为元素指定宽度和高度。
可能会出现边框半径属性被其他 CSS 属性覆盖的情况。例如,如果同时设置了边框半径和边框样式(border-style)属性,那么边框样式会覆盖边框半径属性,导致圆角不生效。
如果使用的是比较古老的浏览器,可能会不支持边框半径属性。在这种情况下,我们可以考虑使用图片或者 JavaScript 实现圆角效果。
以下是样例代码,当设置了宽度和高度时圆角生效:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>