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）实现镂空的效果：
头像剪裁的矩形镂空效果， 下面是最简单的镂空效果：
<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>
实现的效果如下，矩形左上角有个镂空的小正方形：
PS：因为outline是不占据空间的，所以可以通过设置outline的宽度很大来实现遮罩的效果。
（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>
现在再也不用担心屏幕高度太高了！
发表评论 (审核通过后显示评论)：