为边缘设置CSS边框颜色

Question

有没有办法设置边框的“重要”颜色：

我想要在左边框

上显示上边框

我希望你知道我的意思，并抱歉我的英语不好。

Demo

HTML：

<div class="border">
    test
</div>

CSS：

.border {
    border-top: 4px solid #ccc;
    border-left: 4px solid #06f;
}

Answer 1

我只能看到如何改变HTML

Fiddle

<div class="border">
     <div class="border2">
        test
    </div>
</div>

CSS

.border {
    border-top: 4px solid #ccc;
}

.border2{
     border-left: 4px solid #06f;
}

Answer 2

不，因为边框不重叠，但形成45度角，你可以在fiddle

中更好地看到它

.border {
    border-top: 50px solid #ccc;
    border-left: 50px solid #06f;
}

Answer 3

你需要边框和 box-shadow

Demo

.border {
    box-shadow:0 -4px 0 0 #ccc;
    border-left: 4px solid #06f;
}

标记

<div class="border">test</div>

Answer 4

编辑：看起来Liam在我的小提琴上发布了类似的东西;）

将border-left放在div的span或p里面，就像这样

<div class="border">
  <span>test</span>
</div>

使用CSS：

.border {border-top: 4px solid #ccc;}
.border span{border-left: 4px solid #06f;}

demo

Answer 5

将内容包装在另一个div中。

HTML：

<div class="greyBorder">
    <div class="blueBorder">test</div>
</div>

CSS：

.greyBorder {
    border-top: 4px solid #ccc;
}

.blueBorder {
    border-left: 4px solid #06f;
}

JSFiddle