HTML关于border属性的一点小领悟

在写HTML的时候我们经常会想变换border的颜色或者风格。大多数时候我们是这样做的。

我们为这里的li设置了一个border，然后我们现在想改变border-bottom的颜色。通常我们会有两种做法：

左侧截图中的方法能够改变border-bottom的颜色，而右侧和下侧截图这种两种方式border-bottom的颜色将不会发生变化。如果想改变border-bottom的颜色，又不想在原来的CSS里面写（也就是不想用左侧截图的方式），那么就要这样做：

这是因为，涉及到了DOM元素的重绘，在原来的li的CSS里面由于已经有了border：1px solid balck这个属性，因此border已经被绘制出来了，在这个基础上再加上border-bottom：gray这样的属性，边框底部自然会变化颜色。

而如果在其他地方重新定义border的话，比如在js里面或者dom元素的内部进行设置，那么就涉及到border要进行重绘，此时如果只设置border-bottom:yellow这样的属性，因为没有设置1px和solid，一个没有实际宽度的颜色怎么能被绘制出来呢。所以颜色自然是显示不出来的。