border-none与border-0使用区别

关于边框属性的讨论：border:none与border:0的

在网页设计中，边框属性的使用是非常常见的，其中border:none和border:0作为两种常见的无边框设置方式，一直备受热议。它们之间除了渲染性能上的差异外，在标准浏览器中的页面表现并无显著不同。让我们深入这两种属性的本质区别。

一、border:none

在CSS中，border:none表示边框样式为无。当你在Chrome中使用审查元素功能查看时，会发现border相关的多个属性都被设置为none，包括border-style、border-right-style、border-bottom-style等。而在Firefox中使用firebug查看时，会看到有border: medium none的显示，这里的medium指的是默认值。

二、border:0

border:0则是将边框的宽度设置为0。在Chrome审查元素时，你会发现border相关的多个属性，如border-width、border-right-width、border-bottom-width等都被设置为0，同时border-style和border-color被设置为初始值。在Firefox的firebug中查看时，会看到有border: 0 none的显示。

为了更好地理解这两种设置方式的差异，我们可以通过一个例子来说明。假设我们有一个div元素，分别使用.zerotest和.noest类来设置border: 0和border: none。然后在这个div元素内部，我们再设置border-width和border-style。测试结果如下：

1. 对于.zerotest下的元素，即使设置了border-width:3px，由于border-style:none，所以无边框显示。但在某些浏览器如IE7下，可能会显示3像素的边框，这与border:0的有关。

2. 对于.noest下的元素，即使设置了border-style: dashed，由于border-width:0，所以同样无边框显示。但在IE7下，由于方式的不同，可能会有不同的表现。

综合以上分析，我们可以发现在标准浏览器中，border:0和border:none的主要区别在于，border:0会多渲染一个border-width:0属性。这也是为什么在某些情况下，使用border:none的性能会比border:0更高。在设计无边框元素时，推荐使用border:none来实现。在实际开发中，还需要根据具体情况和浏览器兼容性要求来选择合适的设置方式。