html - 我们应该使用像 '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 .