CSS中边框和轮廓属性的区别是什么?
如果没有区别，为什么同一事物有两种性质?
当前回答
CSS中的outline属性在元素的外部画一条线。它和border很相似，只是:
它总是围绕所有的边，你不能指定具体的 它不是盒子模型的一部分，所以它不会影响 元素或相邻元素的位置
来源:https://css-tricks.com/almanac/properties/o/outline/
其他回答
边框与轮廓的区别:
Border是box模型的一部分，因此它与元素的大小相关。 Outline不是box模型的一部分，所以它不会影响附近的元素。
演示:
#{边境 边框:10px纯黑色; } #{轮廓 轮廓:10px纯黑色; } < html > <身体> <span id="border"> border </span>其他文本<br><br> <span id="outline"> outline </span>其他文本 < /身体> < / html > 其他的差异: 大纲显示在边框之外。 轮廓不能有圆角;边界。
think about outline as a border that a projector draw outside something as a border is an actual object around that thing. a projection can easily overlap but border don't let you pass. some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!) but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element but the problem is if you don't do spacing properly it would overlap with other contents.
简而言之: 优点:轮廓 它不会打乱间距和位置 缺点: 重叠几率高
CSS中的outline属性在元素的外部画一条线。它和border很相似，只是:
它总是围绕所有的边，你不能指定具体的 它不是盒子模型的一部分，所以它不会影响 元素或相邻元素的位置
来源:https://css-tricks.com/almanac/properties/o/outline/
Border是在元素内部创建的，而outline是在元素外部创建的。因此，border与元素的宽度和高度一起计算，而outline绘制在元素外部。
我做了一小段css/html代码，只是为了看看两者之间的区别。
Outline最好包含可能溢出的子元素，特别是在内联容器中。
Border更适合于块行为元素。
为您演奏，先生!
