在CSS中，我怎樣才能有一個雙重背景色和一個以第二個背景色元素為中心的文本？

Question

我想做這樣的事情： ul menu li標簽

我應該為每個元素使用雙重標記嗎？ 例如：

<ul class="menu">
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div>
</ul>

還是雙李標簽？ 我已經在CSS中嘗試了linear-gradient屬性，但是只有一個標簽，並且我想獲得與圖像中相同的結果，所以在我看來，必須有兩個具有不同背景顏色的不同標簽，而一個黑色，只需要具有較高的z-index屬性。

我很新，並且在設計和樣式上有些差勁，所以在此先感謝您的幫助！

Answer 1

您可以使用偽元素::before來創建彩色的左側

請注意，您使用的div作為ul的直接子ul無效，因此我將其刪除了

 ul.menu { display: flex; list-style: none; padding: 0; } ul.menu li { margin: 0 5px; } ul.menu a { position: relative; display: inline-block; width: 120px; background: black; color: white; padding: 4px 0 4px 10px; text-decoration: none; text-align: center; } ul.menu a::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background: gray; width: 10px; } 

 <ul class="menu"> <li><a href="#">Firefox</a></li> <li><a href="#">Chrome</a></li> <li><a href="#">Opera</a></li> </ul> 

---

或左border

 ul.menu { display: flex; list-style: none; padding: 0; } ul.menu li { margin: 0 5px; } ul.menu a { position: relative; display: inline-block; width: 120px; background: black; color: white; padding: 4px 0; text-decoration: none; text-align: center; border-left: 10px solid gray; } 

 <ul class="menu"> <li><a href="#">Firefox</a></li> <li><a href="#">Chrome</a></li> <li><a href="#">Opera</a></li> </ul> 

Answer 2

您可以使用線性梯度，只需將梯度的兩個值都放在同一點
（例如： gray 10%, black 10% ），因此它們會在該點分割背景。

旁注：你也應該刪除outter div S為中心的li標簽，因為它們不是內部有效的ul元素。

 ul.menu { list-style: none; display: flex; } ul.menu li.inside { background: linear-gradient(to right, gray 10%, black 10%); margin-left: 5px; padding: 5px 5px 5px 20px; width: 120px; display: block; box-sizing: border-box; } li a { color: white; } 

 <ul class="menu"> <li class="inside"><a href="#">Firefox</a></li> <li class="inside"><a href="#">Chrome</a></li> <li class="inside"><a href="#">Opera</a></li> </ul>