Question

我试图设置双边框的样式，并为每个双边框赋予自己的颜色。我只对每一面造型（边框左边和右边边框）。

我一直在寻找并且找不到一篇关于为双边边框添加单独颜色的文章

border-color: #cbcccd;
border-style: solid;
border-width: 0px 1px 0px 1px

有一些关于使用box-shadow的文章，但是当你只希望它应用于边框时，没有任何内容。如果某人有解决方案或更好的方法，请帮助我们！

Answer 1

多个boxshadows在这里工作得很好

JSfiddle Demo

<强> CSS

div {
    border-color: grey;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    height:100px;
    width:100px;
    margin:25px auto;
    box-shadow:-2px 0 0 0 red, 
                2px 0 0 0 green;
}

Answer 2

您可以使用:before伪元素并为其添加另一个边框。

示例 CSS ：

.foo{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-right-color: orange;
    border-left-color: red;
    position: relative
}

.foo:before{
    content: "";
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-right-color: green;
    border-left-color: blue;
    position: absolute;
    width: 100%;
    height: 100%;
}

<强> DEMO

Answer 3

这可能有效：将你想要添加边框的任何内容放入div中，然后为div添加边框并将它们分别设置为样式。例如：
HTML：<div><table></table></div>
CSS：table{border-color: green} div{border-color: purple}

如何给予双边权利;左边的颜色

3 个答案: