标签：
outline这个属性平时用的不太多，最近被问及专门研究一下这个属性的作用。
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 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Examples</title> 7 <style type="text/css"> 8 div { 9 height: 100px; 10 width: 100px; 11 margin: 50px auto; 12 outline: 10px solid yellow; 13 background: gray; 14 } 15 16 body { 17 background: red; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div> 24 啦啦啦啦啦啦 25 </div> 26 </body> 27 28 </html>
结果就是这样的，在body设置类背景色红色在body里面的div设置了黄色外轮廓色，外轮廓色在background上面。
块级元素、内联元素的outline
与border一样，可以同时设置内联元素或者块级元素的outline和border
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 span{ 8 outline:1px solid red; 9 border:1px solid blue; 10 } 11 p{ 12 outline:1px solid yellow; 13 border:1px solid gray; 14 } 15 </style> 16 </head> 17 <body> 18 <p>刘延东与国家<span>体育总局局长刘鹏、北京市市长王安顺等12人将向国际奥委会进行陈述，向全世界展示北京举办2022年冬奥会的实力和信心。全会开幕 不记名投票选出冬奥举办地国际奥委会第128次全会昨晚在吉隆坡会展中心隆重开幕。国际奥委会委员、2022年冬奥会申办</span>城市代表等出席开幕式。国际奥委会委员、马来西亚奥委会主席伊姆兰，国际奥委会主席巴赫和马来西亚总理纳吉布先后致辞。 19 国际奥委会第128次全会的一项<span>重要议程</span>是以不记名投票方式选出2020年冬青奥会和2022年冬奥会的举办城市。 20 本次全会将持续到8月3日。在为期四天的会议中，国际奥委会委员们还将围绕《奥林匹克2020议程》进行讨论，并听取里约奥运会、平昌冬奥会、东京奥运会以及未来两届青奥<span>会筹备工作进展的报告。此外，全会还将选举一名国际奥委会执委和若干名委员。 21 国际奥委会全会是国际奥委会一年一度的内部会议</span>。参加会议的人员为国际奥委会委员，相关国际单项体育联合会、国家（地区）奥委会代表等。 据新华社电 22 </p> 23 </body> 24 </html>
看到这里累了的童鞋可以冲杯咖啡，休息一下，下面的才是重点。
下面讨论outline的层级问题（或者可以说是层叠问题）
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style type="text/css"> div{ height:100px; padding:10px; margin:20px; border:10px solid #ff00ff; } div:nth-child(1){ background:yellow; } div:nth-child(2){ background:gray; outline:100px solid rgba(0,255,0,1); } div:nth-child(3){ background:green; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
结果是中间的outline覆盖了上面和下面的内容部分，如果给outline一个足够大的值的话，可以覆盖除了自己之外的全部屏幕。类似图中那样，如果绿色继续延伸，那么就可以铺满屏幕了。
但是如果给上面和下面两个div也加上outline的话
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style type="text/css"> div{ height:100px; padding:10px; margin:20px; border:10px solid #ff00ff; } div:nth-child(1){ background:yellow; outline:10px solid rgba(255,0,0,1); } div:nth-child(2){ background:gray; outline:100px solid rgba(0,255,0,1); } div:nth-child(3){ background:green; outline:10px solid rgba(255,0,0,1); } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
结果变成了这样
后面一个div的outline覆盖了前面一个div的outline
这里就不难想到outline是怎么样的了，outline如同相框的框，在内容（照片）上面。而且在页面靠后的元素的outline会覆盖前面一个的outline。
或者可以这么理解：页面绘制Render Tree（渲染树，或者说呈现树那里)，按照绘制的先后顺序绘制轮廓（outline），其实其他样式如果特殊性一样，也是后面的会覆盖前面的样式，一样的道理。
如果浮动了呢？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 div{ 8 height:100px; 9 padding:10px; 10 margin:20px; 11 border:10px solid #ff00ff; 12 } 13 div:nth-child(1){ 14 background:yellow; 15 outline:10px solid rgba(255,0,0,1); 16 } 17 div:nth-child(2){ 18 background:gray; 19 outline:100px solid rgba(0,255,0,1); 20 float:left; 21 width:100px; 22 } 23 div:nth-child(3){ 24 clear:both; 25 background:green; 26 outline:10px solid rgba(255,0,0,1); 27 } 28 </style> 29 </head> 30 <body> 31 <div></div> 32 <div></div> 33 <div></div> 34 </body> 35 </html>
上图第二个div是浮动的，神奇的是第一个div的outline居然出来了。跟最后一个div一样的情况。
如果定位了呢？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 div{ 8 height:100px; 9 padding:10px; 10 margin:20px; 11 border:10px solid #ff00ff; 12 } 13 div:nth-child(1){ 14 background:yellow; 15 outline:10px solid rgba(255,0,0,1); 16 } 17 div:nth-child(2){ 18 background:gray; 19 outline:100px solid rgba(0,255,0,1); 20 position: relative; 21 width:100px; 22 } 23 div:nth-child(3){ 24 clear:both; 25 background:green; 26 outline:10px solid rgba(255,0,0,1); 27 } 28 </style> 29 </head> 30 <body> 31 <div></div> 32 <div></div> 33 <div></div> 34 </body> 35 </html>
相对定位relative之后就跑到上面来了，绝对定位absolute也是一样，固定定位fixed亦是一样。这里是没有设置z-index的情况下，如果设置了z-index则可以顺便更改div的层叠顺序，也就包含了outline的层叠顺序。
总结：outline的层级顺序是这样的
本文链接：点击这里
转载请注明作者：Manfred Hu
That‘s all.Thanks
标签：
原文地址：http://www.cnblogs.com/manfredHu/p/4691385.html
