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时，它总是扩展这些规则，如下所示。

如果你知道的话请告诉我如何在萤火虫中关闭它。

Answer 1

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

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

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

1 个答案: