CSS实现推荐高亮区域

如何灰色其他DOM元素，只高亮所选元素。

1. 高亮区域position 绝对定位或者固定定位

 .x { 
       position: absolute; 
       // ...other style
  }

2. 使用box-shadow, 无限大阴影即可（border也可以，但是会导致盒模型变化）。

 .x { 
       position: absolute; 
       box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
  }

3. 添加需要高亮区域的宽高及位置

 .x { 
       position: absolute; 
       box-shadow: 0 0 0 1000em rgb(0,0,0,0.3);
       height: 100px;
       width: 300px;
       top: 300px;
       left:  200px; 
  }

4. 增加出场动画 - [可选]

  .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