border:none与border:0使用区别

绝地灬酷狼 2021-11-22 23:00 200阅读 0赞

一、border:none  
border-style的简写  
在chrome审查元素看到以下结果

element.style {
    border: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: initial;
    border-color: initial;
    }

在firefox中用firebug查看元素会看到以下结果：

element.style {
        border: medium none;
    }

注意这个medium值  
二、border:0  
border-width的简写  
在chrome审查元素看到以下结果

element.style {
    border: 0;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-style: initial;
    border-color: initial;
    }

在firefox中用firebug查看元素会看到以下结果：

element.style {
        border: 0 none;
    }

注意在firebug中border:none和border:0的区别  
下面举个例子来具体说明下

有兴趣的朋友可以复制以上代码在这个浏览器试一试：  
测试结果：  
1、.zerotest .setwidth  
虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7会显示3像素的边框，这跟border:0解析有关。下面会讲到)  
2、.zerotest .setstyle  
虽然定义了border-style: dashed,但是border-width:0 所以无边框  
3、.nonetest .setwidth  
虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7下无边框)  
4、.nonetest .setstyle  
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(IE7下为一像素)  
综合1、4可以分析出在IE7下  
border:0 被解析为 border-width:0  
border:none 被解析为 border-style:none  
再来看看标准浏览器  
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高  
所以设计蜂巢建议使用border:none来实现无边框效果

![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211122/b041b22af4df49a7b6535cce2f8ca16e.png