轮廓和边框属性之间的区别答案

【问题标题】：Difference between outline and border properties轮廓和边框属性之间的区别
【发布时间】：2011-11-20 07:31:15
【问题描述】：

轮廓和边框非常相似（尽管它们确实存在差异，如引用问题中所述），但它们以相反的顺序使用完全相同的属性/值。例如：

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

对我来说，这似乎是一个应该避免的明显不一致。当同时使用边框和轮廓时，很容易混淆顺序并编写无效的 CSS。是否有任何已知原因这两个相似的项目具有以相反顺序写入的相同值？

编辑：

似乎（至少在 IE8 中）两者都可以（有时）接受任一顺序的值并且工作正常，这使得标准以这些不同的方式编写它们似乎有点奇怪。

【问题讨论】：

您从哪里获得这些信息？
一本 CSS 书籍 (amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/…) 和 Visual Studio 的智能感知

标签： css

【解决方案1】：

你的假设是错误的。两个属性的简写，除了值的顺序为 width、style 和 color。

见

你可以随意混合它们，它仍然可以工作，但那是浏览器很宽松。

【讨论】：

我认为是这种情况，但是当我遇到一个错误（不可重现）时，我开始质疑它，当我尝试设置 css“outline:1px solid red”时，javascript 间歇性地抛出错误说这是无效的。它通常有效，但“outline:red solid 1px”总是有效。
所有 CSS 速记属性都允许混淆它们的顺序，只要这不会导致歧义。因此border 和outline 可以按任意顺序指定，而font 不能。
@Jim：这没有任何意义。您可能无法重现它，因为该错误与其他问题有关。
@Spudley 啊，很公平 - 我确实想不出可能的歧义。本身就值得回答，不是吗？（即将删除我的）