如何灰色其他DOM元素，只高亮所选元素。
- 高亮区域position 绝对定位或者固定定位
.x {
position: absolute;
// ...other style
}
- 使用box-shadow, 无限大阴影即可（border也可以，但是会导致盒模型变化）。
.x {
position: absolute;
box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
}
- 添加需要高亮区域的宽高及位置
.x {
position: absolute;
box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
height: 100px;
width: 300px;
top: 300px;
left: 200px;
}
- 增加出场动画 - [可选]
.x {
position: absolute;
box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
height: 100px;
width: 300px;
top: 300px;
left: 200px;
box-shadow .2s;
}
核心元素 box-shadow 盖上去，dom本身没有颜色即可。
- 简单预览效果，放大box-shadow范围即可。
image.png
