在 div 元素周围创建高亮，其中高亮元素具有白色填充和彩色边框答案

【问题标题】：Create highlight around div element where highlight elements have white fill and colored border在 div 元素周围创建高亮，其中高亮元素具有白色填充和彩色边框
【发布时间】：2019-01-22 22:20:24
【问题描述】：

目标是突出显示 div 的边框，并且无论底层颜色如何，都可以使突出显示可见。我们的想法是通过在 div 周围创建一个边框来实现这一点，其中每个边框元素（在本例中为圆形，而不是破折号）都包含一个白色填充，并且本身是一个彩色边框。

不幸的是，边框不重叠，而是偏移，这会生成双边框外观，而不是具有不同颜色的单个边框。

Codepen：https://codepen.io/anon/pen/gqbrzv

<div class="selectionBox">
  <div class="inner"></div>
</div>

   .selectionBox {
      width: 100px;
      height: 100px;
      background: blue;
      box-sizing: border-box;
      position: absolute;
      border: 5px dotted #FFF;
      pointer-events: none;
   }

   .selectionBox .inner {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 7px dotted #F23C32;  
   }

【问题讨论】：

标签： html css border

【解决方案1】：

您可以考虑径向渐变来实现这一点：

.selectionBox {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: 
    linear-gradient(blue,blue) content-box, /*will hide the radial gradient inside and keep them only visible on the padding*/
    radial-gradient(#fff 40%,red 44%,red 58%,transparent 60%) top left/10px 10px,
    blue;
  box-sizing: border-box;
  position: absolute;
  pointer-events: none;
}

<div class="selectionBox">
</div>

【讨论】：

【解决方案2】：

如果你有一个绝对元素，它总是根据第一个相对的父元素定位，如果它有一个边框，它会根据那个偏移。我的解决方案是将 selectionBox 和 inner 放在一个绝对定位的容器中，然后使这些元素大小相同，除了内部元素有红点：

.container {
  position: relative;
}

.selectionBox {
  width: 100px;
  height: 100px;
  background: blue;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  border: 7px dotted #FFF;
  pointer-events: none;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 7px dotted #F23C32;
}

<div>
  <div class="selectionBox">
  </div>
  <div class="inner"></div>
</div>

【讨论】：