1.outline的用法
outline用法和border類似， 如下：
.outline {
outline: 1px solid #000;
}
兩者表現(xiàn)也類似， 都是給元素的外面畫框，但是，作用卻不一樣。
2.outline的特性
（1）outline是一個和用戶體驗密切相關(guān)的屬性，與focus狀態(tài)和鍵盤訪問關(guān)系密切。
在訪問網(wǎng)頁的時候，如果鼠標壞了，這時候我們一般會用tab鍵來按次序不斷focus控件元素，包括：鏈接、按鈕、輸入框等表單元素，或者focus設(shè)置了tabindex的普通元素，按Shift+Tab組合鍵反方向訪問。
在默認狀態(tài)下，對處于focus狀態(tài)的元素瀏覽器會通過虛框或者外發(fā)光的形式進行區(qū)分和提示，這個虛框或者外發(fā)光就是瀏覽默認的outline，如下圖就是google默認的outline的效果。這個outline是很有用的，它可以提示用戶自己當前聚焦在哪個元素上面，而且在此時按下回車鍵就相當于點擊了這個元素。
（2）outline不占據(jù)空間
outline不論設(shè)置得多大，它都是不占據(jù)空間的，所以可以用來實現(xiàn)一些特殊的布局效果
3.outline的作用
（1）實現(xiàn)鏤空的效果：
頭像剪裁的矩形鏤空效果， 下面是最簡單的鏤空效果：
<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>
實現(xiàn)的效果如下，矩形左上角有個鏤空的小正方形：
PS：因為outline是不占據(jù)空間的，所以可以通過設(shè)置outline的寬度很大來實現(xiàn)遮罩的效果。
（2）自動填滿屏幕剩余空間的應(yīng)用技巧
看下面的代碼，內(nèi)容顯示完之后會留很大一片空白：
<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>
現(xiàn)在再也不用擔心屏幕高度太高了！
