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

📌 相关文章

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

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

边框半径不起作用 - CSS

当使用 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>