时间戳

首页 > 解决方案 > 链接的线性渐变

html - 链接的线性渐变

问题描述

我试图给链接下划线一个线性渐变，如下所示。

不幸的是，这里没有显示颜色。问题是在我的浏览器中我只看到一种颜色，第一种是渐变色……第二种有什么问题？制作这个下划线渐变的错误方法？

a {  
    background-image: linear-gradient(to right, rgba(57, 72, 255, 1) 100%, rgba(57,     213, 255, 1) 100%);
    background-repeat: repeat-x;
    background-size: 4px 4px;
    background-position: 0 22px;
  }
  
  a:visited {  color: #2a2a2a;
}
<a href=""> <p> Lorem Ipsum </p> </a>

好的，想通了。如果其他人想知道问题出在哪里：您必须将背景大小设置为auto.

标签： htmlcss

解决方案

a {  
    background: linear-gradient(to right, 
    rgba(57, 72, 255, 1), 
    rgba(57, 213, 255, 1)
    );
    background-position: bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    text-decoration: none;
  }
  
<a href="#">  Lorem Ipsum  </a>

  • 背景宽度必须为 100% 宽度，
  • 位于底部，
  • 并且不重复。

最重要的是，我被删除了默认下划线。

推荐阅读