我已經找到了用 2 種不同顏色創建邊框底部的方法，但是是否可以在 2 種不同顏色之間留出空間，如上圖所示？
uj5u.com熱心網友回復：
您將不得不調整百分比以在您想要的位置準確獲得白間隙，但這應該可以讓您開始。
a {
font-family: sans-serif;
font-size: 36px;
background:
linear-gradient(
to right,
rgba(0, 83, 124,1) 0%,
rgba(0, 83, 124,1) 80%,
rgba(255,255,255,1) 80%,
rgba(255,255,255,1) 82%,
rgba(255, 63, 63,1) 82%,
rgba(255, 63, 63,1) 100%
) bottom left no-repeat;
padding: 6px 0;
text-decoration: none;
background-size: 100% 6px;
color: rgba(0, 83, 124,1);
}<a href="">CONTACT US</a>uj5u.com熱心網友回復：
h2{
position: relative;
display: inline-block;
}
h2::before {
position:absolute;
content:" ";
width: 74%;
left:0;
bottom:-5px;
height:5px;
background: #000;
}
h2::after {
position:absolute;
content:" ";
width: 24%;
right:0;
bottom:-5px;
height:5px;
background: #f00;
}<h2>Contact Us</h2>uj5u.com熱心網友回復：
你可以使用 CSS 的邊框顏色屬性來實作
h2 {
font-family: sans-serif;
color: #1b478d;
text-transform: uppercase;
}
.txt1 {
border-bottom: 5px solid #1b478d;
margin-right: 4px; /* Space You Want between the Word "Contact" and "Us" */
}
.txt2 {
border-bottom: 5px solid #e69399;
}<h2>
<span class="txt1">Contact</span><span class="txt2">Us</span>
</h2>該margin-right物業.txt1被用于“聯系”和“我們”兩個詞之間的空間
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375031.html