为边缘设置 CSS 边框颜色答案

【问题标题】：Set CSS Border Color for edges为边缘设置 CSS 边框颜色
【发布时间】：2013-09-16 23:13:41
【问题描述】：

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

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

这是一个代码 sn-p：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

我能看到的唯一方法是更改 HTML：

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

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

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

【讨论】：

【解决方案2】：

编辑：好像 Liam 在我制作小提琴时发布了类似的内容；）

像这样将左边框放在 div 内的 span 或 p 上

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

使用 CSS ：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你需要 border 和 box-shadow

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

标记

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

【讨论】：

好答案，（猜猜谁）IE see here 不太支持 box-shadow。仅限 IE9+
对旧浏览器使用 CSS3 PIE 也可以查看stackoverflow.com/questions/8181699/box-shadow-in-ie7-and-ie8

【解决方案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;
}

【讨论】：