Question

我能够通过使用图像来更改渐变背景+从codepen获取css片段（https://codepen.io/anon/pen/RMdvdJ）

但带边框的盒子阴影不会改变！

我希望下划线是渐变而不是单一颜色。

我使用了很好的生活主题，我尝试了很多改变但是底部边框没有改变它的颜色渐变。

.post  .post-content p a {
    border-bottom: 2px solid #566ce7;
	box-shadow: inset 0 -5px 0 #566ce7;    
}	
.post .post-content p a:hover {
  background-image: linear-gradient(135deg, #566ce7 0%, #764ba2 100%);
  color: #fff;
}

<div class="post">
  <div class="post-content">
    <p>
      <a href="#">Link here</a>
    </p>
  </div>
</div>

http://www.digitalassetsy.com/about/（链接到我的网页）

请帮忙。

此致

Aleena。

Answer 1

在hover上，您需要关闭方框阴影和边框

.post .post-content p a {
  border-bottom: 2px solid #566ce7;
  box-shadow: inset 0 -5px 0 #566ce7;
}

.post .post-content p a:hover {
  background-image: linear-gradient(135deg, #566ce7 0%, #764ba2 100%);
  color: #fff;
  box-shadow: none;
  border: none;
}

<div class="post">
  <div class="post-content">
    <p>
      <a href="#">Link here</a>
    </p>
  </div>
</div>

Answer 2

我认为这是你想要实现的目标

＆＃13;

.post  .post-content {
    border-bottom: 2px solid #566ce7;
	box-shadow: inset 0 -5px 0 #566ce7;    
}	
.post .post-content p a:hover {
  background-image: linear-gradient(135deg, #566ce7 0%, #764ba2 100%);
  color: #fff;
}

＆＃13;

<div class="post">
  <div class="post-content">
    <p>
      <a href="#">Link here</a>
    </p>
  </div>
</div>

＆＃13;

Answer 3

当您使用border作为底线时，您需要使用border-image将渐变应用于边框。我没有看到box-shadow在这里使用

.post .post-content p a {
  border-bottom: 5px solid;
  border-image: linear-gradient(135deg, #566ce7 0%, #764ba2 100%) 5;
}

.post .post-content p a:hover {
  background-image: linear-gradient(135deg, #566ce7 0%, #764ba2 100%);
  color: #fff;
}

a {
  text-decoration: none;
}

<div class="post">
  <div class="post-content">
    <p>
      <a href="#">Link here</a>
    </p>
  </div>
</div>

如何在Border Bottom中添加渐变

3 个答案: