在 CSS 中为边框底部添加偏移量

Question

我有一个问题，我需要在 CSS 中使用给定的偏移量来制作边框底部

例如，在这个 JSFiddle 中，我有一个黑色边框底部。

https://jsfiddle.net/uexma4o6/343/

<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>

但我想给这个 2px 纯黑色边框偏移 5px 的位置。

有可能吗？

Answer 1

这可以通过线性渐变来完成：

.box {
  background:
    linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
    lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

你也可以这样做：

.box {
  background:
    linear-gradient(black,black) bottom/100% 2px no-repeat,
    lightcoral;
  border-bottom:5px solid lightcoral;
  width: 500px;
  height: 40px;
  box-sizing:border-box;
}

<div class="box"></div>

盒子阴影的另一个想法：

.box {
  background:lightcoral;
  border-bottom:2px solid black;
  box-shadow:0 5px 0 lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

并带有嵌入阴影：

.box {
  background:lightcoral;
  box-shadow:
    0 -5px 0 lightcoral inset,
    0 -7px 0 black inset;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

Answer 2

解决方案

https://jsfiddle.net/StephanieSchellin/j7pmxkc3/

使用 CSS ::after 添加具有您正在寻找的边框的伪元素。然后移动伪元素以按您喜欢的方式定位它。此伪元素将始终绑定到其根元素，但您仍然必须考虑修改它以进行 @media 查询更改等。

您在下图中看到，此解决方案将伪元素分层放在根元素之上。您可以选择使用 ::before 或尝试其他定位设置来满足您的布局需求。

在进行此类边缘案例时，请务必进行大量跨浏览器测试，因为您可能会遇到盒模型问题。

HTML

<div class='the-div'></div>

CSS

.the-div {
  width:500px;
  height:40px;
  background-color:lightcoral;
  position: relative
}
.the-div::after {
  border-bottom: 2px solid black;
  content: '';
  width:500px;
  position:absolute;
  bottom:5px;
}

进一步阅读

见https://css-tricks.com/pseudo-element-roundup/ 你可以用伪元素做很多很酷的事情。