html - 如何创建 3 种颜色的边框(相机类型)？

Question

我想创建一个具有 3 种颜色(蓝色、白色和红色)的边框(相机类型)。

我创建了这个 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 中做到这一点？可能吗？

我没有得到想要的结果

Answer 1

您实际上并不需要很多代码。一个渐变就可以完成这项工作:

.box {
  width: 250px;
  height: 150px;
  border: 10px solid;
  border-image: linear-gradient(90deg,red 33%,#0000 0 66%,blue 0) 1;
}

<div class="box"></div>