📜  边框半径不起作用 - CSS (1)

📅  最后修改于: 2023-12-03 15:28:17.814000             🧑  作者: Mango

边框半径不起作用 - CSS

当使用 CSS 边框半径属性(border-radius)时,有时会发现设置好的圆角效果没有生效。这可能是因为以下原因:

  1. 元素没有设置宽度和高度。

圆角效果只对有宽度和高度的元素生效。如果元素没有设置宽度和高度,边框半径属性不会生效。因此,为了让边框半径属性正常工作,应该先为元素指定宽度和高度。

  1. 边框半径属性被覆盖。

可能会出现边框半径属性被其他 CSS 属性覆盖的情况。例如,如果同时设置了边框半径和边框样式(border-style)属性,那么边框样式会覆盖边框半径属性,导致圆角不生效。

  1. 浏览器不支持边框半径属性。

如果使用的是比较古老的浏览器,可能会不支持边框半径属性。在这种情况下,我们可以考虑使用图片或者 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>