目标是突出显示 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;
}
您可以考虑径向渐变来实现这一点:
.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>
如果你有一个绝对元素,它将始终根据第一个相对的父元素进行定位,如果它有边框,它将根据该元素进行偏移。我的解决方案是将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>
<style>
.highlight {
padding: 10px; /* Adjust padding as needed */
background-color: white; /* White fill */
border: 2px solid #ff0000; /* Colored border (red in this case), adjust colour as needed */
border-radius: 5px; /* Optional: rounded corners */
}
</style>
<div class="highlight">
<!-- Your content goes here -->
</div>