用css删除边框的最简单方法

border: 0;

它们实际上是等价的，指向不同的快捷方式:

border: 0;
//short for..
border-width: 0;

另一个…

border: none;
//short for...
border-style: none;

两者都可以，只要选择一个就可以了:)

为了精确地看到border: 0和border: none之间的区别我们可以做一些实验。

实验:

让我们创建三个div，第一个div的边框只能通过设置宽度为0来禁用，第二个div的边框只能通过设置样式为none来禁用，第三个div的边框只能通过设置颜色为透明来“禁用”。然后让我们试试效果:

边界:0; 边界:没有; 边界:透明 边框样式:固体!重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框颜色:红色!重要; 边框宽度:2 px !重要; 边框样式:固体!重要;

var container = document.querySelector('#container'); var btnSetZero = document.querySelector('#setZero'); var btnSetNone = document.querySelector('#setNone'); var btnSetTransparent = document.querySelector('#setTransparent'); var btnReset = document.querySelector('#reset'); btnSetZero.addEventListener('click', () => { container.className = "border-zero"; }); btnSetNone.addEventListener('click', () => { container.className = "border-none"; }); btnSetTransparent.addEventListener('click', () => { container.className = "border-transparent"; }); btnReset.addEventListener('click', () => { container.className = ""; }); div div { border: 2px solid red; margin: 2px; font-family: monospace; white-space: nowrap; width: 250px; } div.border-zero div { border: 0; } div.border-none div { border: none; } div.border-transparent div { border: transparent; } <div id="container"> <div style="border-style: solid!important; border-color: red!important;"> border-style: solid!important;<br> border-color: red!important; </div> <div style="border-width: 2px!important; border-color: red!important;"> border-width: 2px!important;<br> border-color: red!important; </div> <div style="border-width: 2px!important; border-style: solid!important;"> border-width: 2px!important;<br> border-style: solid!important; </div> </div> <button id="setZero">border: 0;</button> <button id="setNone">border: none;</button> <button id="setTransparent">border: transparent;</button> <button id="reset">reset</button>

我在firefox和chrome浏览器上的结果是一样的:

边界:0;似乎设置border-width为0和border-style为none，但不改变border-color;

边界:没有;似乎只改变border-style(无);

边界:透明;似乎改变边界颜色为透明和边界样式为none;

这是Firefox 78.0.2(64位)的结果:

img {
    border: none;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: medium;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: medium;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
}

img {
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
}

日期:20200720

您可以根据Oli提供的规范简单地使用两者。

我总是使用border:0 none;。

尽管分开指定它们没有坏处，而且如果您确实使用遗留的CSS1属性调用，一些浏览器会更快地解析CSS。

虽然边境:0;通常会将边框样式默认为none，但我注意到一些浏览器强制执行默认边框样式，这可能会奇怪地覆盖border:0;。

用css删除边框的最简单方法

border: 0;