border:none 和border:0有什么区别么？

顶楼上，实际上border是border-width, border-style, border-color的三合一，border:none，意思就是没有边框，而border-width:0，意思是有边框，但是width是0，它可能还会有style和color。

結論：

border: none; 並不意味着 border: 0; 但反過來可以。

原先的測試：

經測試，border: 0; 也會覆蓋掉 color 與 style。作用和 border: none 幾乎完全一樣。

所以其它樓說的 border: 0; 也可以有顏色之類全錯。（如果你把設置顏色的語句放在後面，border: none 也是可以的，因爲覆蓋了前面的語句。）

border: 0; 同樣沒有顏色，沒有 style

結論是：border: 0; 與 border: none; 一樣。

上測試代碼：

<style>
div {
    border-color: blue;
    border-style: dotted;
    border: 0;
    border-width: 10px;

    transition: border ease 2s;
}
input:focus + div {
    border: 10px solid red;
}
</style>

<input>


<div></div>

呈現效果：從 0 寬度的黑色開始增大（沒有顏色），而不是藍色；
焦點失去時直接消失，而不是慢慢減小。

說明：1 顏色被覆蓋；
2 樣式被覆蓋；
3 沒有邊框樣式則無法設置非 0 邊框寬度。

更新：

新的測試，不需要動畫，直接看到效果。

div.d0 {
    border-style: dotted; // 被覆蓋了，所以無顯示
    border: 0;
    border-color: blue;
    border-width: 10px;
}
div.d1 {
    border: 0;
    border-color: blue;
    border-style: dotted; // 寬度 0，無顯示
}
div.d2 {
    border: none;
    border-color: blue;
    border-style: dotted; // 默認寬度，有顯示
}

新的測試表明 border: none 和 border: 0 還是有一點差異的。
border: none; 並不推出 border: 0; 但反過來可以。

border:none 等于 border-width为0,而且border-style也为none。就是没有宽度和样式的边
border:0只是border-width为0,。就是没有宽度的边。

对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

要解释区别，首先得先介绍一下border这个属性。

border是一个简写属性。可以设置如下属性

border-width
border-style
border-color

平时写的时候不用写齐三个属性，写其中一两个也是允许的，比如

border: 1px solid;

为什么这样是可行的呢，因为这样写，浏览器会设置这个缺少属性的默认值。过程等价于（伪代码）

border-width: 1px;
border-style: solid;
border-color: value of color; /* `border-color`默认取该元素的`color`属性的值 */

同理border: 0;等价于（伪代码）

border-width: 0;
border-style: none; // `border-style`默认值为`none`
border-color: value of color;

border: none;等价于（伪代码）

border-width: medium; // `border-width`默认值为`medium`，具体大小根据浏览器的默认样式而定
border-style: none;
border-color: value of color

所以以下代码

border-width: 1px;
border: solid;

等价于

border-width: 1px;
border-width: medium; /* default */
border-style: solid;
border-color: value of color; /* default */

以上几个例子应该可以解释清楚这两个写法的区别了吧。

CSS里类似的属性还有一些，比如background，font等，在写的时候应该注意，简写属性会覆盖前面单个定义的属性值。

【热门文章】