Создайте подсветку вокруг элемента div, где выделенные элементы имеют белую заливку и цветную рамку - PullRequest
Новая
       4

Создайте подсветку вокруг элемента div, где выделенные элементы имеют белую заливку и цветную рамку

0 голосов
/ 23 января 2019

Цель состоит в том, чтобы выделить границу элемента 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;  
   }

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Вы можете рассмотреть радиальный градиент для достижения этого: 

.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>
0 голосов
/ 23 января 2019

Если у вас есть абсолютный элемент, он всегда будет располагаться в соответствии с первым родителем, который является относительным, и если у него есть граница, он будет смещаться в соответствии с этим.Мое решение состоит в том, чтобы поместить 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>
...