如何用CSS创建蓝白红三色相机样式边框？

我想要创建蓝白红三色的相机样式边框，已编写如下HTML代码：

<div class="reinsurance-offer">
    <div class="reinsurance-offer-link"><a href="/node/133" hreflang="fr">Faites la promotion de vos événements</a></div>
</div>

并应用了以下CSS代码：

#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer {
    background-color: #f7f9fa;
    padding-right: 2.25rem;
    padding-left: 2.25rem;
    padding-top: 1.6875rem;
    padding-bottom: 1.6875rem;
    text-align: center;
}
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
    display: inline-flex;
    padding: 0.75rem;
    border: 5px solid;
    border-color: #E20E17 #1F71B8;
    background-color: #ffffff;
}

当前渲染效果如对应图片所示，我希望实现目标图的样式（无模糊效果），请问是否可行？该如何用CSS实现？

解决方案 #

完全可行，你当前的CSS只设置了上下红、左右蓝的单双层边框，而相机样式需要的是红-白-蓝三层边框的层次感，下面给你两种不需要修改HTML结构的实现方法：

方法一：用box-shadow叠加多层边框 #

直接通过border+box-shadow模拟三层边框，代码简洁易维护：

#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
    display: inline-flex;
    padding: 0.75rem;
    /* 内层白色边框 */
    border: 5px solid #ffffff;
    /* 依次叠加红色、蓝色外层边框 */
    box-shadow: 
        0 0 0 5px #E20E17,
        0 0 0 10px #1F71B8;
    background-color: #ffffff;
}

原理：box-shadow支持多层叠加，每一层阴影向外扩展对应一层边框，配合内层白色border，就能还原相机边框的三层视觉效果。

方法二：用伪元素实现错位边框 #

如果需要更灵活的边框错位效果（比如红蓝边框不完全对齐），可以用伪元素：

#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
    display: inline-flex;
    padding: 0.75rem;
    border: 5px solid #ffffff;
    background-color: #ffffff;
    /* 给伪元素提供定位基准 */
    position: relative;
}

/* 红色边框伪元素 */
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 3px solid #E20E17;
    z-index: -1;
}

/* 蓝色边框伪元素 */
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link::after {
    content: '';
    position: absolute;
    top: -13px;
    left: -13px;
    right: -13px;
    bottom: -13px;
    border: 3px solid #1F71B8;
    z-index: -2;
}

原理：通过两个伪元素分别模拟红、蓝边框，设置不同的偏移量和层级，实现相机边框的错位视觉效果，你可以自由调整top/left/right/bottom的值来改变边框的错位程度。

两种方法都不需要改动现有HTML，直接替换原有的.reinsurance-offer-link相关CSS即可，只要没有其他样式冲突，就能达到你想要的无模糊目标效果。

内容的提问来源于stack exchange，提问作者user20416497