CSS中是否可以有不同颜色的左侧和顶部边框？

Question

CSS中是否可以有不同颜色的左侧和顶部边框？

31

我希望左侧有4像素粉色边框，其余地方有1像素灰色边框：

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

问题在于连接是斜向的，所以会出现可怕的覆盖。我尝试过：

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

但是没有运气。

jsFiddle示例

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

截图

- Kevin Mann

我不明白你所说的“直接连接”是什么意思，以及它与你的屏幕截图有何不同。 - BoltClock

1

据我所知，仅使用CSS是不可能实现您所要求的（顶部边框和左侧边框之间的垂直或水平对齐）。 - Gareth

也许可以使用矢量图形（我不确定）。 - r4.

4个回答

7

如果您希望使用:before伪选择器，您需要设置一些内容。例如，请参见以下示例代码的此 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: '';
}

显示为：

工作代码的截图

编辑
嗯，虽然这应该严格回答了问题，但在尝试将我的解决方案适应到问题的“fiddle”中时，我发现它与填充不太搭配。我愿意听取建议/编辑/其他答案，可以处理这一点:(...

- Jeroen

我认为这会在一些工作上有所帮助。我遇到的问题是:before会忽略填充。示例图片 - Kevin Mann

1

实际上，我可以通过将填充添加到:before来修复这个问题。 - Kevin Mann

1

@KevinMann，请注意，一旦引入多行（使用<br>或简单换行）此代码将会出现错误（示例）。然而，我的答案不会出现这种情况（示例）。 - 0b10011

最后我在:before和项目中都添加了padding-right: 5px;，它完美地工作了，见这里。 - Kevin Mann

6

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

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

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

并且

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

- Luca

2

背景

默认情况下，CSS对于所有边框接缝都使用斜接缝（45度角）。因此，要实现任何边框的直角接缝（90度角），您可以使用（1）内部盒子阴影，（2）伪元素或（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;
}

选项2：使用方形接头的`伪元素`

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

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

- tobias

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 0b10011 · Accepted Answer

.item::before 是正确的做法，但需要在单个 border-left 属性之外进行一些工作。您需要使伪元素可见 (display: block; content: "";)，将伪元素定位于 .item 左侧，并将其拉伸以正确对齐顶部和底部边框。

虽然可以手动完成此操作，但我强烈建议使用 CSS 变量 (或者在您的预处理器中使用变量)，因为这样可以减少更新边框宽度时出错和痛苦的可能性。

.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>

CSS中是否可以有不同颜色的左侧和顶部边框？

jsFiddle示例

截图

背景

选项2：使用方形接头的伪元素

选项3：使用background-image和多个linear-gradients制作正方形接头

选项2：使用方形接头的`伪元素`

选项3：使用`background-image`和多个`linear-gradients`制作正方形接头