多個導航元素上的漸變文本

Question

我正在嘗試獲得一個帶有漸變的導航欄，該漸變在所有項目上繼續，例如漸變導航

我已經使用background-clip: text; 但這會導致font-awesome出現問題，我不知道如何設置頂部/底部邊框以跟隨文本的漸變。

另一種方法是我在父元素上使用漸變背景並使用混合模式嘗試它，但這會導致項目之間偶爾出現故障。 混合混合模式的漸變毛刺

我的問題是，實現這種漸變導航的最佳方法是什么？

這是代碼（ background-clip: text; ）

 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

你的第一種方法幾乎很好。 您需要使圖標display:inline覆蓋由 Font Awesome 設置的inline-block阻止背景技巧工作。

對於線條顏色，您可以考慮將相同漸變應用於相同元素的border-image 。 訣竅是在li上應用負邊距以重疊該漸變，並在懸停時重置邊距以顯示它。

 body { background: #161616; margin: 0; padding: 0; } .header { height: 80px; background: #ffffff; } .menu { height: 100%; display:flex; } .menu ul { list-style: none; padding: 0; margin:0; border-image-source:linear-gradient(90deg, #ff0066, #2850ff); border-image-slice:2 0; border-top:2px solid; border-bottom:2px solid; background: linear-gradient(90deg, #ff0066, #2850ff); background-clip: text; -webkit-background-clip: text; display:flex; font-weight: 600; height: 100%; box-sizing:border-box; } li { display: flex; align-items: center; margin:-2px 0; border-top:2px solid white; border-bottom:2px solid white; transition: all 0.2s ease-in-out; } .menu li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-transform: uppercase; -webkit-text-fill-color: transparent; padding: 0 10px; text-decoration: none; } .menu li:hover { margin:0 0; } i.fa { font-size: 12px; padding-right: 5px; display:inline; }

 <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>

以上不適用於 Safari，因此您可以嘗試以下操作：

 body { background: #161616; margin: 0; padding: 0; } .header { height: 80px; background: #ffffff; } .menu { height: 100%; display:flex; } .menu ul { list-style: none; padding: 0; margin:0; border-image-source:linear-gradient(90deg, #ff0066, #2850ff); border-image-slice:2 0; border-top:2px solid; border-bottom:2px solid; background: linear-gradient(90deg, #ff0066, #2850ff); background-clip: text; -webkit-background-clip: text; font-weight: 600; height: 100%; box-sizing:border-box; } li { height:calc(100% - 4px); float:left; margin:2px 0; outline:4px solid #fff; transition: all 0.2s ease-in-out; } .menu li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height:75px; text-transform: uppercase; -webkit-text-fill-color: transparent; padding: 0 10px; text-decoration: none; } .menu li:hover { outline:0px solid #fff; } i.fa { font-size: 12px; padding-right: 5px; display:inline; }

 <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 2

我認為您可以繼續使用第二個，因為它能夠滿足您的用例。 對於item之間的線條問題，可以將ul改為flex，去掉list item上表格單元格的樣式。

 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>

Answer 3

使用 background-clip: text 可能是可能的，對於字體真棒圖標問題，您需要使用 Unicode 字體真棒圖標。

請看一下更新的片段

 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; */ 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 span { font-family: 'Font Awesome 5 Free'; font-weight: 900; } .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="#"><span>&#xf002;</span> Search</a></li> </ul> </div> </div>