多个导航元素上的渐变文本

Question

我正在尝试获得一个渐变的导航栏，该渐变在所有项目上都可以连续使用，例如：

Gradient Navigation

我在某种程度上使用了background-clip：text;但这会导致字体很棒的问题，而且我不知道如何设置顶部/底部边框以跟随文本的渐变。

我尝试的另一种方法是在父元素上使用渐变背景并使用mix-blend-mode，但这会导致项目之间偶尔出现故障。

Gradient glitch with mix-blend-mode

我的问题是，实现这种渐变导航的最佳方法是什么？

这是代码（背景剪辑：文本；）

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.menu li {
  display: table-cell;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 32px 10px 30px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  text-decoration: none;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

并且使用混合混合模式：

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background: linear-gradient(90deg, #ff0066, #2850ff);
}

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  display: table-cell;
}

.menu li a {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 80px;
  display: inline;
  padding: 33px 10px;
  text-decoration: none;
  background-color: #ffffff;
  mix-blend-mode: screen;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  color: #000000;
  padding: 30px 10px;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
     <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

Answer 1

我认为您可以继续第二个，因为它可以满足您的用例。对于项目之间的换行问题，您可以将ul更改为flex并删除列表项目上表格单元格的样式。

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background: linear-gradient(90deg, #ff0066, #2850ff);
}

.menu ul {
  list-style: none;
  padding: 0;
  display:flex;
}

   

.menu li a {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 80px;
  display: inline;
  padding: 33px 10px;
  text-decoration: none;
  background-color: #ffffff;
  mix-blend-mode: screen;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  color: #000000;
  padding: 30px 10px;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
     <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>