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

adblock
  • 39

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

回复
阅读 7.8k
5 个回答

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

結論:

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

原先的測試:

經測試,border: 0; 也會覆蓋掉 colorstyle。作用和 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: noneborder: 0 還是有一點差異的。
border: none; 並不推出 border: 0; 但反過來可以。

要解释区别,首先得先介绍一下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等,在写的时候应该注意,简写属性会覆盖前面单个定义的属性值。

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

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

宣传栏