关于css border:0;和border:none;的区别

在开发前端的时候，我们经常会碰到这样的情况，需要给一个div或者其他html元素添加上、右、左边框或者下、右、左边框，也就是给元素的3个边加上边框。具体应该怎么写合适呢？

 

这里拿下、右、左边框为例，颜色为灰色，边框线为1px，宽高都为50px;

 

写法一：

.test
{
    width:50px;
    height:50px;
    border-bottom: solid 1px #dddddd;
    border-left: solid 1px #dddddd;
    border-right: solid 1px #dddddd;
}

 

 

写法二：

.test
{
    width:50px;
    height:50px;
    border: solid 1px #dddddd;
    border-top: 0;
}

 

 

写法三：

.test
{
    width:50px;
    height:50px;
    border: solid 1px #dddddd;
    border-top: none;
}

 

 

对比以上三种写法，虽然从页面的表现上来看都实现了，但明显写法一不可取，代码又多又烦琐，而写法二跟写法三的区别就在于"border-top: 0;"和"border-top: none;"

 

那么这两者有什么区别呢？

 

 

从浏览器渲染角度考虑:
推荐使用border:none;因为它不占用空间。
border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。

 

从浏览器差异角度考虑:
推荐使用border:0;
border:none;在有些浏览器会显示灰色的边框。

 

从css文件大小角度考虑:
border:0;比border:none;少3个字符。

 

 

所以综合比较下来，写法二更合适。