如何为相同的边框设置不同的颜色？

Question

^ 这就是输出结果。

这是关于div的border-bottom属性，它占据了视口的全宽。

我搜过SO，也试过答案，但问题是，有的地址边框是四面八方的，有的边框颜色不一样，不在同一行。

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

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

Mind the spacing.

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>

Answer 2

或者，如果你想在颜色之间设置空白，只需做一些计算并添加参数 box-shadow

<!DOCTYPE html>
<html>
<head>
<style>
div{
        width:520px;
        height:100px;
        position:relative;
        background:lightgrey;
    }

    div:after{
        position:absolute;
        content:"";
        width:100px;
        height:3px;
        background:dodgerblue;
        bottom:0;
        box-shadow:5px 0 0 0 white,105px 0 0 0 red,110px 0 0 0 white,210px 0 0 0 yellow,215px 0 0 0 white,315px 0 0 0 green,320px 0 0 0 white,420px 0 0 0 orange;
    }
</style>
</head>
<body>

    <div></div><div></div><div></div><div></div>

</body>
</html>

抱歉，起初我只想评论来自 Akshay 的 post，但它没有给我空间。

Answer 3

如果你真的想用边框做这个属性那么你应该按照以下步骤操作：

创建如下所示的图像：

使用以下 CSS 和 HTML

<!DOCTYPE html>
<html>
<head>
<style> 
div{
margin: 0px;
padding:0px;
width:100%;
height:100px;
background-color: #eeeeee;
border-bottom: 4px solid;
-webkit-border-image: url(border.jpg) 0  0 10 0 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.jpg)0 0 10 0 stretch; /* Opera 11-12.1 */
border-image: url(border.jpg)0 0 10 0 stretch;
}

</style>
</head>
<body>
<div></div>
</body>
</html>

如何为相同的边框设置不同的颜色？

How to have different colors for the same border?

html

css

gradient