在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

解决方案

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/ 伪元素可以做很多很酷的事情。

Answer 2

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

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