outline用法和border类似, 例如:
.outline {
outline: 1px solid #000;
}
两者表现也类似, 都是给元素的外面画框,但是,作用却不一样。
1. outline是一个和用户体验密切相关的属性,与focus状态和键盘访问关系密切。
在访问网页的时候,如果鼠标坏了,这时候我们一般会用tab键来按次序不断focus控件元素,包括:链接、按钮、输入框等表单元素,或者focus设置了tabindex的普通元素,按Shift+Tab组合键反方向访问。
在默认状态下,对处于focus状态的元素浏览器会通过虚框或者外发光的形式进行区分和提示,这个虚框或者外发光就是浏览默认的outline,如下图就是google默认的outline的效果。这个outline是很有用的,它可以提示用户自己当前聚焦在哪个元素上面,而且在此时按下回车键就相当于点击了这个元素。
2. outline不占据空间
outline不论设置得多大,它都是不占据空间的,所以可以用来实现一些特殊的布局效果
(1)头像剪裁的矩形镂空效果, 下面是最简单的镂空效果:
<html> <head> <style> .crop { overflow: hidden; height: 300px; width: 300px; background: #f00; } .crop > .crop-area { width: 80px; height: 80px; outline: 9999px solid rgba(0,0,0,.5); cursor: move; } </style> </head> <body> <div class="crop"> <div class="crop-area"> </div> </div> </body> </html>
(2)自动填满屏幕剩余空间的应用技巧
看下面的代码,内容显示完之后会留很大一片空白:
<html> <head> <style> .footer { height: 50px; } .footer > p { position: absolute; left: 0; right: 0; text-align: center; padding: 15px 0; background-color: #a0b3d6; clip: rect(0 9999px 9999px 0); } </style> </head> <body> <div class="footer"> <p>test fill</p> </div> </body> </html>
但是加了outline以后可以把这个屏幕用背景色填满:
<html> <head> <style> .footer { height: 50px; } .footer > p { position: absolute; left: 0; right: 0; text-align: center; padding: 15px 0; background-color: #a0b3d6; outline: 9999px solid #a0b3d6; clip: rect(0 9999px 9999px 0); } </style> </head> <body> <div class="footer"> <p>test fill</p> </div> </body> </html>
现在再也不用担心屏幕高度太高了!