我可以在 CSS 中使用不同颜色的左边框和上边框吗？

Question

我希望左侧边框为 4px 厚的粉红色，其他地方为 1px 灰色：

border: 1px solid #E5E5E5;
border-left: 4px solid #F24495;

问题是连接是对角线的，所以我得到了可怕的覆盖。我试过：

.item:before{ 
  border-left: 4px solid #F24495;
}

但运气不佳。

jsFiddle 示例

• jsFiddle 示例突出显示对角线连接

截图

Answer 1

.item::before

是正确的方法，但它需要在单个

border-left

属性之外进行一些工作。您需要使伪元素可见 (

display: block; content: "";

)，将伪元素放置在

.item

的左侧，然后将其拉伸以与顶部和底部边框正确对齐。

虽然这可以手动完成，但我强烈建议使用CSS Variables（或预处理器中的variables），因为它使得更新边框宽度更不容易出错和痛苦。

.item {
  display: inline-block;
  padding: 0.2em 0.3em;
  background: #f8f8f8;
  color: #454545;

  /* Set border widths with variables */
  --top-border-width: 4px;
  --bottom-border-width: var(--top-border-width);
  --left-border-width: 16px;
  --right-border-width: var(--top-border-width);

  /* Set border styles for each side */
  border-top: var(--top-border-width) solid #e4e4e4;
  border-bottom: var(--bottom-border-width) solid #e4e4e4;
  border-right: var(--right-border-width) solid #e4e4e4;

  /* Remove the left border and add blank space where the border should be placed */
  border-left: 0;
  margin-left: var(--left-border-width);

  /* Contain the ::before */
  position: relative;
}

.item::before {
  /* Give the pseudo element substance */
  display: block;
  content: "";

  /* Add a left border with a straight edge */
  border-left: var(--left-border-width) solid #f84995;

  /* Position pseudo element's border where the normal border would have been placed */
  position: absolute;
  top: calc(0px - var(--top-border-width));
  bottom: calc(0px - var(--bottom-border-width));
  left: calc(0px - var(--left-border-width));
}

<h1 class="item">Gen.2</h1>

Answer 2

如果您想使用

:before

伪选择器，您还需要设置一些内容。请参阅示例 this jsfiddle 以及以下示例代码：

<div>Container</div>

CSS：

div {
    border: 10px solid black;
    border-left-width: 0;
}
div::before {
    border: 10px solid orange;
    border-right-width: 0;
    content: '';
}

显示为：

编辑
嗯，虽然这应该严格回答问题，但在尝试将我的解决方案适应问题的小提琴时，我发现这与填充效果不太好。接受可以处理这一点的建议/编辑/其他答案:(...

Answer 3

这应该可行，但需要额外的标记：

.outer {
    border: 1px solid #E5E5E5;
    border-left: 0;
}

.inner {
    border-left: 4px solid #F24495;
}

和

<div class="outer">
    <div class="inner">
        ...
    </div>
</div>

Answer 4

背景

默认情况下，CSS 对所有边框关节使用 miter Joints（45° 角）。因此，要为任何边框实现方形接头（90°角），您可以使用（1）内部box-shadow，（2）pseudo-elements或（3）background-image和多个线性-渐变。

假设您有以下想要设置样式的元素：

<div></div>

选项 1：使用

box-shadow

形成方形接头

div {
  /* downside of using box-shadow, you need to add the   */
  /* inner border size to the padding on top of any      */
  /* additional padding you might want                   */
  padding: 20px;
  /* by changing the order of your box-shadows, you      */
  /* can modify which borders overlap each other         */
  box-shadow:
    /* left "inner border" */
    inset 20px 0 0 0 red,
    /* right "inner border" */
    inset -20px 0 0 0 grey,
    /* top "inner border" */
    inset 0 20px 0 0 grey,
    /* bottom "inner border" */
    inset 0 -20px 0 0 grey;
}

• 在 JSFiddle 上查看
• 浏览器支持

  box-shadow

选项 2：方形接头

pseudo-elements

div {
  border: 20px solid grey;
}

div::before {
  position: absolute;
  background-color: red;
  content: "";
  width: 20px;
  /* we need to add the height of the top and bottom    */
  /* border to the pseudo-elements' height as the       */
  /* inset border is not included in the height of the  */
  /* div even when "box-sizing: border-box" is set.     */
  height: calc(100% + 20px + 20px);
  top: -20px;
  left: -20px;
}

• 在 JSFiddle 上查看
• 浏览器支持

  pseudo-elements

选项 3：使用

background-image

和多个

linear-gradients

形成方形接头

div {
  /* downside of using multiple linear-gradients, you   */
  /* need to add the inner border size to the padding   */
  /* on top of any additional padding you might want    */
  padding: calc(20px + 10px);
  background-image: 
    /* left "inner border" */
    linear-gradient(to right, red 20px, transparent 20px),
    /* right "inner border" */
    linear-gradient(to left, grey 20px, transparent 20px),
    /* top "inner border" */
    linear-gradient(grey 20px, transparent 20px),
    /* bottom "inner border" */
    linear-gradient(to top, grey 20px, transparent 20px);
}

• 在 JSFiddle 上查看
• 浏览器支持

  background-images()

• 浏览器支持

  linear-gradient()

Answer 5

包装两个元素并使用 border-width 属性的组合对我来说效果很好。请注意，当您也使用边框半径时，您将必须取消设置受影响的边。

我将其包含在我的示例中，因为 border-radius 与边框一起使用非常常见。

JSFiddle

点击这里

代码

<div class="outer">
    <div class="inner">
        Here ives some text
    </div>
</div>

.outer {
  margin: 10px;
  border-left: solid lightblue;
  border-radius: 3px;
  border-width: 0 0 0 8px;
  margin-bottom: 16px;
}

.inner {
  border: 7px solid grey;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-left: 0;
  padding: 16px;
}

输出