在 CSS 中为 border-bottom 添加偏移量

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>