輪廓和邊界屬性之間的區別

輪廓和邊框非常相似（儘管它們確實有區別，正如引用問題中所解釋的那樣），但它們使用完全相同的屬性/相反順序的值。例如：

border: 1px solid black; 
outline: black solid 1px;

對我來說，這似乎是應該避免的明顯不一致。在使用邊框和輪廓時，很容易混淆順序並編寫無效的CSS。這兩個相似項目有相同的值寫在相反的順序是否有任何已知的原因？

編輯：

看來（至少在IE8）既可以（有時）接受任何順序的值，做工精細，這使得它顯得有點陌生，該標準是寫他們以這些不同的方式。

2011-09-19 yoozer8

你從哪裏得到這些信息？ –

CSS書（http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/ref=sr_1_1?ie=UTF8&qid=1316442755&sr=8-1）和Visual Studio的智能感知 – yoozer8

你的假設是不正確的。這兩個屬性的簡寫除了值爲width,style和color。

見

如你願意，你也許可以將它們混合，它會仍然工作，但就是瀏覽器是寬鬆的。

2011-09-19 14:31:39

我認爲情況就是這樣，但是當我嘗試設置css「outline：1px solid red」並說它是無效的時，我在打開一個錯誤（不可重現）的時候開始質疑它，其中javascript間歇性地拋出錯誤。它通常工作，但「輪廓：紅色固體1px」始終有效。 – yoozer8

所有CSS速記屬性都允許將它們的訂單混淆在一起，只要不會導致歧義。因此'border'和'outline'都可以按任意順序指定，而'font'不能。 – Spudley

@Jim：這沒有意義。您可能無法重現它，因爲錯誤是與其他事情有關。 – thirtydot

回答