border-radius:0;和border-radius:none;_border-radius: 0;-CSDN博客

本文链接：https://blog.csdn.net/qq_1724201421/article/details/79830122

本文详细介绍了CSS中的border-radius属性及其用法。该属性用于设置元素边框的圆角，可通过设定不同的半径值来创建圆形或椭圆形的角。文章通过实例展示了如何使用border-radius:0;来重置已设置的圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS属性 border-radius用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。

border-radius默认值为0，不可继承。如果在CSS中对同一元素先后设置了两条border-radius规则，第二条border-radius规则如果想让元素边框圆角重置，应该设为border-radius:0;而不是border-radius:none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>border-radius:0;和border-radius:none;</title>
    <style>
        div{
            width:40px;
            height:40px;
            background:red;
            border-radius:20px;
            border-radius:none;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以下是设置了border-radius:none;的效果图，可以看到并没有重置效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>border-radius:0;和border-radius:none;</title>
    <style>
        div{
            width:40px;
            height:40px;
            background:red;
            border-radius:20px;
            border-radius:0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以下是设置border-radius:0;的效果图，可以看到已经层叠掉了前面的border-radius值，重置了圆角边框。