如何让同一个边框有不同的颜色？

Question

^ 这就是输出应该是的。

它与 div 的 border-bottom 属性有关，该属性占据视口的整个宽度。

我已经搜索过，并且尝试过答案，但问题是，其中一些地址在所有方向上都有边界，而另一些则有不同颜色的边界，而不是在同一行。

如何使用 Pure CSS 或其任何预处理器来实现这一点？

另外，我可以使用MaterializeCSS放置图像并使其响应，但这超出了目的。因此，像将其用作图像这样的答案是没有用的。

注意间距。

Answer 1

您可以使用多个框阴影来实现此目的

我创建了一个:after伪元素并使用box-shadows 用不同的颜色复制它。您可以通过在之前的颜色基础上添加 100 来添加更多颜色box-shadow

div{
    width:500px;
    height:100px;
    position:relative;
    background:lightgrey;
}

div:after{
    position:absolute;
    content:"";
    width:100px;
    height:3px;
    background:dodgerblue;
    bottom:0;
    box-shadow:105px 0 0 0 red,210px 0 0 0 yellow,315px 0 0 0 green;
}

<div></div>