css outline
更新于 阅读 5 次
outline 用于设置元素的轮廓，对于很多元素来说，如果没有设置轮廓就是不可见的，但是输入型元素例外，其样式由浏览器决定。
下面先看一个效果：
上面给div元素设置了outline属性。
效果看起来跟border属性相似，但是outline不会占用空间，其绘制在元素的周围，它悬浮在元素边框之上。
用法
outline的取值：
outline-color: 设置轮廓的颜色outline-style: 设置轮廓的样式outline-width: 设置轮廓的宽度
outline 可以取上面的任意一个、两个或者三个值，并且顺序不重要。
outline-offset
outline-offset用于设置outline与元素边缘的偏移量(是outline内侧与元素边缘的位置)，默认为0。在上面的例子加上 10px 的偏移量。
可以看到outline与边缘的间隙变大了。
如果将值设置为负数 -10px:
如果整个图片都要被阴影遮住，使用outline-offset可以完成。
图片的宽度为120px，outline-offset 设置为60px，outline为60px。
这里outline-offset的值手动设置为图片的一半，如果换成其他尺寸的图片就需要更改，所以这里可以成100vmax，屏幕宽高的最大值。
使用鼠标hover来改变outline，在鼠标hover某个元素上时高亮该元素。
对图片进行裁剪，显示特定区域，如下显示五角星，同时给五角星加上旋转动画
参考资料