html - 如何使用边框底部移动下划线以使其看起来像使用框阴影插图的下划线？

Question

简单的问题：

我可以使用border-bottom（右侧的那些）使下划线看起来与使用box-shadow（左侧的那些）完全一样吗？

我只需要它是 CSS。正如您从代码片段中看到的那样，它可能跨越多行。

基本上我需要将边框底部向上移动一点，而不是弄乱其他所有东西。

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

div.flex {
  display: flex;
  width: 420px;
  justify-content: space-between;
}

div.flex2 {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

a.borderBottom {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  
  border-bottom: 2px solid rgb(60,128,124);
}

<div class="flex">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

<div class="flex2">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

这个问题的原因（浏览器一致性）：

该box-shadow示例完全符合我的要求，但在 Edge 上看起来不太好（而且我担心其他浏览器也可能无法正确呈现它）。不过，它在 Chrome、Firefox 和 Safari 的最新版本上看起来很完美。

在 Edge 上，box-shadow示例如下所示（请参阅底部的小线泄漏）：

另一方面，border-bottom似乎在浏览器之间呈现一致。但我无法在我需要的位置获得下划线。

标签： htmlcssborderbox-shadow

Answer 1

渐变可以做到这一点

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

div.flex {
  display: flex;
  width: 420px;
  justify-content: space-between;
}

div.flex2 {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

a.borderBottom {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  
  background:
   linear-gradient(rgb(60,128,124),rgb(60,128,124)) 
    bottom 1px center/ /* Position */
    100% 2px  /*width height*/
   no-repeat;
}

<div class="flex">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

<div class="flex2">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>