CSS：outline的用法，用outline实现镂空效果

1.outline的用法

outline用法和border类似， 如下：

.outline {
　outline: 1px solid #000;
}

两者表现也类似， 都是给元素的外面画框，但是，作用却不一样。

2.outline的特性

（1）outline是一个和用户体验密切相关的属性，与focus状态和键盘访问关系密切。
在访问网页的时候，如果鼠标坏了，这时候我们一般会用tab键来按次序不断focus控件元素，包括：链接、按钮、输入框等表单元素，或者focus设置了tabindex的普通元素，按Shift+Tab组合键反方向访问。

在默认状态下，对处于focus状态的元素浏览器会通过虚框或者外发光的形式进行区分和提示，这个虚框或者外发光就是浏览默认的outline，如下图就是google默认的outline的效果。这个outline是很有用的，它可以提示用户自己当前聚焦在哪个元素上面，而且在此时按下回车键就相当于点击了这个元素。

（2）outline不占据空间
outline不论设置得多大，它都是不占据空间的，所以可以用来实现一些特殊的布局效果

3.outline的作用

（1）实现镂空的效果：
头像剪裁的矩形镂空效果， 下面是最简单的镂空效果：

实现的效果如下，矩形左上角有个镂空的小正方形：

PS：因为outline是不占据空间的，所以可以通过设置outline的宽度很大来实现遮罩的效果。
（2）自动填满屏幕剩余空间的应用技巧
看下面的代码，内容显示完之后会留很大一片空白：

  
    
  
  
    

      
test fill
    
  

!](https://upload-images.jianshu.io/upload_images/7320499-3b0dea7b7c930b04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

但是加了outline以后可以把这个屏幕用背景色填满：

  
    
  
  
    

      
test fill
    
  

现在再也不用担心屏幕高度太高了！