CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
CSS中边框和轮廓属性的区别是什么?
如果没有区别,为什么同一事物有两种性质?
当前回答
作为一个使用“outline”的实际示例,系统后面模糊的虚线边界集中在一个网页上(例如。可以使用outline属性来控制(至少,我知道它可以在Firefox中,没有尝试过其他浏览器)。
一种常见的“图像替换”技术是使用,例如:
<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>
在CSS中:
#logo
{
background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
display: block;
text-indent: -1000em;
}
问题是当焦点到达标签时,轮廓会向左偏移1000em。Outline可以让您关闭这些元素的焦点轮廓。
我相信IE开发者工具栏在“选择”模式下突出显示要检查的元素时,也使用了一些类似“隐藏”的东西。这很好地说明了“提纲”不占空间的事实。
其他回答
同样值得注意的是,W3C的大纲是IE的边界,因为IE没有实现W3C的盒子模型。
在w3c box模型中,边框与元素的宽度和高度无关。在IE中,它是包容性的。
来自:http://webdesign.about.com/od/advancedcss/a/outline_style.htm
CSS outline属性是一个令人困惑的属性。当你第一次了解它时,你很难理解它与边境财产有什么不同。W3C将其解释为以下区别: 大纲不占用空间。 轮廓可以是非矩形的。
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/
大纲的实际应用涉及透明度。如果你有一个带有背景的父元素,但是想让子元素的边框透明,这样父元素的背景就能显示出来,你必须使用“outline”而不是“border”。虽然边框可以是透明的,但它将显示子元素的背景,而不是父元素的背景。
换句话说,这种设置产生了以下效果:
outline: 7px solid rgba(255, 255, 255, 0.2);