【问题标题】: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;}
    

    demo

    【讨论】:

    • 认为我们同时回答了 50-50 :)
    【解决方案3】:

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

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

    【讨论】:

    • 你可以做到,只是用那个 HTML 做不到。
    • 嗯,是的,你可以用周围的元素“模仿”边框的行为,这样你甚至可以在没有 JS 的情况下做到这一点,但这并不是他所要求的。对不起,如果我不清楚。
    【解决方案4】:

    你需要 borderbox-shadow

    Demo

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

    标记

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

    【讨论】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-03-08
      • 2015-11-29
      • 2015-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多