Question

Colored Border

^这就是输出应该是什么。

它是关于div的border-bottom属性，它占据视口的整个宽度。

我搜索了SO，我尝试了答案，但问题是，其中一些是在所有方向上添加边框边框，而其他边框有不同颜色的边框，而不是在同一行。

如何使用Pure CSS或其任何前导教师实现这一目标？

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

注意间距。

Answer 1

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

我创建了一个:after伪元素，并使用box-shadow来复制不同的颜色。您可以通过向上一个box-shadow

添加100来添加更多颜色

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的帖子，但它没有给我空间去做。

Answer 3

如果你真的想用border属性做这个，你应该按照以下步骤进行：

创建一个如下图像：

Image name:border.jpg

使用以下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>

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

3 个答案: