html - 为边缘设置 CSS 边框颜色

Question

有什么方法可以设置边框的“重要”颜色：

我希望上边框显示在左边框上。

这是一个代码片段：

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

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

score 5 · Accepted Answer

我能看到如何做到这一点的唯一方法是更改 HTML：

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

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

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

score 3 · Accepted Answer

你需要边框和框阴影

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

标记

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

score 3 · Accepted Answer

不，因为边界不重叠，而是形成一个 45 度角，你可以在这个fiddle中更好地看到它

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

score 2 · Accepted Answer

编辑：好像利亚姆在我做小提琴的时候发布了类似的东西；）

像这样将border-left放在div内部的span或ap上

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

使用 CSS ：

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

score 1 · Accepted Answer

只需将内部内容包装在另一个div.

HTML：

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

CSS：

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

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

5 回答 5