CSS Outset / Inset，边框和轮廓

Question

CSS outset,inset,border and outline之间的确切区别 真的很喜欢这个，以及什么属性可以一起使用。？
哪些浏览器支持上述哪些属性？
以上属性的简短示例将是好的。

由于

Answer 1

边界和轮廓差异

边框 边框边缘围绕框边框。 Its area计算盒子模型的总大小。您可以为四个可能的边框（顶部，右侧，底部和左侧）指定尺寸（border-width），颜色（border-color）和样式（border-style）。您可以检索有关边框属性here的更多信息。

大纲：与border类似，但在这种情况下不占用空间，与border相反。此外，您不能单独设置每个边框的样式，轮廓样式适用于框的所有四个边。 Outline可与border一起使用。您可以应用于大纲的属性为outline-color，outline-style和outline-width您可以获得有关大纲属性here的更多信息。

这是一个代表outline和border的框模型

边框样式：插入和开始

插图： border-style 。边框使框看起来就像嵌入在画布中一样。您可以在border-style和border-color中使用此border-width。

一开始：另一个 border-style 。与'inset'相反：边框使框看起来好像是从画布中出来的。您可以在border-style和border-color中使用此border-width。

文档和来源

• How Do Browsers Render the Different CSS Border Style Values?
• W3C Box model specification
• W3C Border specification
• W3C Outline specification

Answer 2

这些是边界的属性

inset：定义3D嵌入边框。效果取决于边框颜色值 outset：定义3D开始边框。效果取决于边框颜色值 outline：围绕元素设置轮廓

Answer 3

第一个答案是很好的答案。希望我们在两个月前用html-dom开始这个...

只想添加：这里的最大区别是，border没有offset属性（“边框”的“填充”不影响元素的放置）和outline无法使用-radius属性进行回合。