1) 想在遮罩層上突出某個(gè)div,想高亮顯示。

期待的效果是這樣的

  body {
  height: 100%;
  width: 100%;

}
/*   霧罩層 */
.mask {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.circle {
  box-shadow: 0 0 0 1200px rgba(0, 0, 0, 0.5);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /*border-radius: 100%;*/
  display: flex;
  height: 150px;
  width: 150px;
  display: block;
  float:left;
}

* HTML部分

<div class="popup">
  <div class="circle"   id="s1"  style="position=absolute; left:400px; top:110px ; "  ></div> 
  <div class="circle"   id="s2"  style="position=absolute; margin-top: 20px;left:40px;  top:550px; "  ></div> 
</div>

如果只有一個(gè)div需要高亮，這個(gè)方法還行。見(jiàn)圖一。

有多個(gè)div的話(huà)，效果很差。

有什么別的辦法嗎？