悬停时的线性渐变底部边框

Posted 2023-05-08

【中文标题】悬停时的线性渐变底部边框

【英文标题】：linear gradient bottom border on hover

【发布时间】：2016-03-13 05:07:47

【问题描述】：

我正在尝试将 border-bottom 上的 hover 上的 border-bottom 应用到 <a> 但它没有 100% 有效我的目标是使用 html 和 CSS 仅在可能的情况下。

这是我的代码：

a 
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;

a:after 
  content: '';
  position: absolute;
  left: -50%;
  right: 0%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
  border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  transition: all 0.5s linear;
  bottom: 0;
  opacity: 0;

a:hover:after 
  border-right: 25vh;
  right: 0%;
  opacity: 1;

<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

如您所见，border-bottom 不在center 中，也不适合<a> width 的width。

【参考方案1】：

您可以使用此处描述的相同技术：Expand bottom border from center on hover 和两个 box-shadows 在左右边缘创建淡出效果：

a 
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;

a:after 
  display:block;
  content: '';
  height:4px;
  background:#019fb6;
  transform: scaleX(0.0001);  
  transition: transform 250ms ease-in-out;
  box-shadow: inset -40px 0px 30px -25px #fff, inset 40px 0px 30px -25px #fff;

a:hover:after 
  transform: scaleX(1);

<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

注意：您需要插入供应商前缀以最大限度地支持浏览器（请参阅canIuse）。

【讨论】：

感谢您的回答。这里有一些问题：1-我怎样才能在单词和底部边框之间留出空格，因为 padding-bottom 不起作用....... 2-即使我添加 -webkit- any ，转换也不能与 safari 一起使用主意？谢谢

@MohammedMoustafa 1/ 您可以将 margin-top 添加到伪元素或将 line-height 添加到 a。 2/你能分享一下你在safari中测试过的代码吗？

-webkit-transform: scaleX(0.0001); ..................... -webkit-transition: 转换 250ms 缓进出；............ -ms-transform: scaleX (0.0001); ...................... -ms-transition：转换 250ms 缓入出；............ .....变换：scaleX（0.0001）； .................. 过渡：转换 250 毫秒缓入出；........ ......

@MohammedMoustafa 好的，您在 -webkit-transition 声明中缺少 -webkit- 前缀，请参见：jsfiddle.net/webtiki/fn1yb3gb

@MohammedMoustafa 首先，该版本非常过时。其次，它不支持伪元素上的过渡，因此您需要添加另一个元素（如跨度）并将过渡放在该元素上。

【参考方案2】：

您也可以通过将linear-gradient 添加为background-image 来执行此操作。为此，背景图像应位于元素的中心底部，其大小最初应设置为 X 轴上的0%。悬停时，大小应在 X 轴上转换为 100%。 Y轴上渐变的大小就是边框的粗细。

在这种方法中，您不需要任何额外的元素，但浏览器对渐变的支持低于对框阴影的支持。线性渐变仅适用于 IE10+。

a 
  display: inline-block;
  padding-right: 3%;
  padding-bottom: 3%;
  color: #666;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
  background-position: 50% 100%;
  background-size: 0% 4px;
  background-repeat: no-repeat;
  transition: all 0.5s linear;

a:hover 
  background-size: 100% 4px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

如Can I Use - Notes 中所述，Safari 不支持线性渐变的to [side] 语法，因此添加以下行以支持 Safari。

background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

_{（不要忘记添加-webkit-transition，也取决于浏览器版本）。}

【讨论】：

谢谢，这样做很好，我对你的代码很满意，但不幸的是，在 safari 上工作没有任何想法吗？

是的，但翻译效果不适用于 IE 11.0.25，非常感谢您的努力。

@MohammedMoustafa：这似乎是 IE11 中的一个已知问题。 background-size 不是该版本的 IE 的动画/可转换属性。直到 IE11，它会优雅地降级并产生没有过渡的边框。 在 Edge 中，它工作得非常好。

你知道我能得到什么js文件来支持所有浏览器的所有旧版本或大多数命令浏览器吗？

@MohammedMoustafa：不，支持所有浏览器的所有版本是不可能的。我想说这种方法已经有合理的浏览器支持和优雅的回退。任何进一步的调整/黑客攻击只会使事情变得更加复杂。