我们应该使用像'border'这样的紧凑css还是像'border-color'，'border-width'那样扩展它？

Question

我可以这样写一个边框的样式：

border: 2px solid #DDDDDD;

或者像这样：

-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-bottom-color: #dddddd;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #dddddd;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 2px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #dddddd;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 2px;
border-top-color: #dddddd;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-style: solid;
border-top-width: 2px;

什么是最好的首选方法？我问这个的原因是，当我使用 Firebug 时，它总是像下面显示的那样扩展这些规则。

如果你知道，请告诉我如何在 firebug 中关闭它。

Answer 1

Firebug 扩展它的原因是为了让您可以看到浏览器如何计算简写指定的样式。如果您想避免级联冲突（例如覆盖速记的速记），可以使用速记属性，但您需要研究哪些属性适用，哪些不适用。

您示例中的绝大多数值都是特定于实现的，因此对于其他浏览器来说是陌生的。 border 简写属性仅对应于 CSS 标准中的一些特定的简写，例如 border-width、border-style 和 border-color，以及任何边（以及 的宽度/样式/颜色每个单独的一面）。一些属于自己的速记（或根本不属于）的标准速记包括border-top-left-radius，它实际上并未显示在您的输入 CSS 中。其余的 (*-ltr/rtl-source) are for internal use only.