border:0与border：none区别与联系

Posted 2020-08-06 Cultivate

联系：前台效果均实现了无边框

区别：

要解释区别，首先得先介绍一下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-style: solid;
border-color: value of color; /* default */

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