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

Question

我想在左边有一个4px厚的粉红色边框，在其他地方有1px灰色边框：

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

问题是连接是对角的，所以我得到一个可怕的叠加。我试过了：

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

但没有运气。

jsFiddle示例

• jsFiddle example highlighting diagonal connection

截图

Answer 1

请参阅jsFiddle Example。要查看使用较粗的边框（并确认连接是直的），请参阅this example。

HTML

<h1 class="test">Test</h1>

CSS

.test {
    border: 1px solid #E5E5E5;
    border-left:0; /* Hide left border */
    padding:.1em .3em;
    position:relative; /* Keep :before contained */
}
.test:before {
    display:block;
    content:".";
    color:transparent;
    font-size:0;
    border-left:5px solid #f24495;
    height:100%;
    position:absolute;
    left:0;
    padding:1px 0; /* Top/bottom padding should equal top/bottom border of .test */
    top:-1px; /* Should equal top border of .test */
    bottom:-1px; /* Should equal bottom border of .test */
}

Answer 2

这应该有效，但需要额外的标记：

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

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

和

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

Answer 3

如果您想使用: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 4

背景

默认情况下，CSS将miter joints（45°角）用于所有边界接缝。因此，要获得任何边界的方角（90度角），可以使用（1）内部box-shadow，（2）pseudo-elements或（3）background-image和多个{{ 3}}。

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

<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;
}

  

  
• linear-gradients
  
• View on JSFiddle
  

选项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;
}

  

  
• Browser support for box-shadow
  
• View on JSFiddle
  

选项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);
}

  

  
• Browser support for pseudo-elements
  
• View on JSFiddle
  
• Browser support for background-images()