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

Question

我有一个问题，我需要在 CSS

中使用给定的偏移量制作边框底部

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

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

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

Add offset to border-bottom in CSS

css

border

offset

解决方案

HTML

CSS

进一步阅读