css交叉颜色边框 |jsp css弹出层

使用CSS交叉颜色边框非常简单，只需要为元素设置边框样式，并利用伪元素在每个边框角上添加斜线即可。

.border {
border: 2px solid #000;
position: relative;
}
.border::before, .border::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.border::before {
top: -2px;
left: -2px;
border-top-color: #f00;
border-left-color: #f00;
}
.border::after {
bottom: -2px;
right: -2px;
border-bottom-color: #0f0;
border-right-color: #0f0;
}

在上面的代码中，大家首先为.border元素设置了2像素黑色实线边框，并将其相对位置设为relative。然后利用::before和::after伪元素在边框上方左侧和下方右侧各添加一个2像素宽的透明边框，并设置边框颜色为红色（before）和绿色（after），从而形成了交叉颜色边框的效果。

需要注意的是，交叉颜色边框并不是所有情况下都适用，如果元素边框过细或者背景颜色对比度不够，效果可能会不明显。因此，使用前需要根据具体情况做出合理的设计。