时间:2021-07-01 10:21:17 帮助过:130人阅读
CSS2加进来的outline属性,中文翻译过来是外轮廓。
神马是轮廓?
轮廓,指边缘;物体的外周或图形的外框。
那这样的话外轮廓就是在外部的边框咯。
看一下正式的定义:outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
看一下比较实际的体会:在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。
暂时说完大概理解,下面继续分析。
CSS2中outline是这样设置的:
p{ outline-style:dotted;}
看起来跟border没有什么区别。
看一下支持度
看起来形势一片大好,不过老式的IE6-7貌似不兼容,所以想用outline替代border的童鞋可能要失望了。可能就是这个原因所以平时用的比较少了。
outline还有一个不太常用的属性,outline-offset,设置外轮廓相对的偏移量,这里的相对可以理解为W3C上面标准的盒模型(border之内)
div { height: 100px; width: 100px; margin: 50px auto; outline: 10px solid rgba(255,255,0,9); background: black; outline-offset: 10px; border:5px solid blue; }
比如这样设置之后的效果是这样的
黄色的是outline,设置了outline-offset之后往外面偏移10px,露出了后面body的背景色红色,蓝色的是border。
outline与background的关系
1 2 3 4 5 6Examples 7 20 21 22 2324 啦啦啦啦啦啦2526 27 28
结果就是这样的,在body设置类背景色红色在body里面的div设置了黄色外轮廓色,外轮廓色在background上面。
块级元素、内联元素的outline
与border一样,可以同时设置内联元素或者块级元素的outline和border
1 2 3 4 5Examples 6 16 17 18刘延东与国家体育总局局长刘鹏、北京市市长王安顺等12人将向国际奥委会进行陈述,向全世界展示北京举办2022年冬奥会的实力和信心。全会开幕 不记名投票选出冬奥举办地国际奥委会第128次全会昨晚在吉隆坡会展中心隆重开幕。国际奥委会委员、2022年冬奥会申办城市代表等出席开幕式。国际奥委会委员、马来西亚奥委会主席伊姆兰,国际奥委会主席巴赫和马来西亚总理纳吉布先后致辞。19 国际奥委会第128次全会的一项重要议程是以不记名投票方式选出2020年冬青奥会和2022年冬奥会的举办城市。 20 本次全会将持续到8月3日。在为期四天的会议中,国际奥委会委员们还将围绕《奥林匹克2020议程》进行讨论,并听取里约奥运会、平昌冬奥会、东京奥运会以及未来两届青奥会筹备工作进展的报告。此外,全会还将选举一名国际奥委会执委和若干名委员。 21 国际奥委会全会是国际奥委会一年一度的内部会议。参加会议的人员为国际奥委会委员,相关国际单项体育联合会、国家(地区)奥委会代表等。 据新华社电 22
23 24
虽然不太好看,不过勉强看着先把。
其实内联元素的outline和块级元素的outline的层级是不一样的。
1 2 3 4 5块级元素与内联元素outline作用的不同 6 19 20 2122 232425 262728 293031 3233 34
结果是这样滴,看不懂?毛有关系,慢慢来。
首先是四个div包裹四张图片,图片就不说了。给div加了一个黄色的有点透明度的outline,给图片加了一个红色的outline。
然后捏,有木有发现,黄色的outline可以把下面的图覆盖了,二红色的outline可以把上面的覆盖却不能覆盖下面的outline。
这就是内联元素和块级元素outline覆盖的不一样。
块级元素的outline可以将上面下面元素的内容都覆盖了,而内联元素的只可以覆盖上面的元素。
看到这里累了的童鞋可以冲杯咖啡,休息一下,下面的才是重点。
下面讨论outline的层级问题(或者可以说是层叠问题)
代码如下:
Examples
结果是中间的outline覆盖了上面和下面的内容、背景、边框部分,如果给outline一个足够大的值的话,可以覆盖除了自己之外的全部屏幕。类似图中那样,如果绿色继续延伸,那么就可以铺满屏幕了。
但是如果给上面和下面两个div也加上outline的话
Examples
结果变成了这样
后面一个div的outline覆盖了前面一个div的outline
这里就不难想到outline是怎么样的了,outline如同相框的框,在内容(照片)上面。而且在页面靠后的元素的outline会覆盖前面一个的outline。
或者可以这么理解:页面绘制Render Tree(渲染树,或者说呈现树那里),按照绘制的先后顺序绘制轮廓(outline),其实其他样式如果特殊性一样,也是后面的会覆盖前面的样式,一样的道理。
如果浮动了呢?
1 2 3 4 5Examples 6 29 30 31 32 33 34 35
上图第二个div是浮动的,神奇的是第一个div的outline居然出来了。跟最后一个div一样的情况。这里尝试加点文本进去,结果是文本是在outline之上的。
也就是说此时outline是在普通background和border上面,在普通的outline和内容的下面。
如果定位了呢?
1 2 3 4 5Examples 6 29 30 31 32 33 34 35
相对定位relative之后就跑到上面来了,绝对定位absolute也是一样,固定定位fixed亦是一样。这里是没有设置z-index的情况下,如果设置了z-index则可以顺便更改div的层叠顺序,也就包含了outline的层叠顺序。
总结:outline的层级顺序是这样的
That's all.Thanks