我正在嘗試在特定文本上添加一條 CSS 漸變線（在中間稍微彎曲），以保持高度相同，寬度應與“位置相對”文本匹配 100%。
我想要實作的目標：https ://imgur.com/a/Tdcz09q
我設法在下面取得了以下進展，但我找不到使用變換彎曲那條線的方法。
.gradient_text {
background: linear-gradient(90.34deg, #1FA30A 0.2%, #B9D124 70.4%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-weight: 500;
position: relative;
}
.gradient_text:after {
content: "";
position: absolute;
top: 102%;
left: 0;
width: 100%;
height: 10px;
display: inline-block;
background: linear-gradient(90.34deg, #1FA30A 0.2%, #B9D124 70.4%);
border-radius: 10px;
}
h2 { font-size: 64px; color: #000; font-family: Arial; }<h2>Lorem <span class="gradient_text green">ipsum</span> dolor sit!</h2>uj5u.com熱心網友回復：
作為一次性解決方案，您可以將“彎曲”線繪制為 SVG <path>。但該解決方案并不適合輕松重用。有兩個因素限制了可以做的事情：
線寬的大小取決于字體相對大小的使用，即
em. 這意味著 SVG 部分需要成為 CSSOM 的一部分，或者至少能夠從檔案樣式表中繼承屬性。這排除了使用帶有 的:after偽元素content: url(image:svg xml,...)來封裝影像。SVG 的標記必須行內放置，與您的文本混合。CSS和SVG中的漸變定義不能混合使用。它們可以相互翻譯，但
background: url(#gradient)參考 SVG 漸變繪制服務器既不能在 HTML 元素上作業，也不能stroke: linear-gradient(...)為 SVG撰寫代碼<path>。盡管描述了相同的梯度，但這兩個定義都需要詳細說明。
我已將 SVG 漸變定義和線條的模板放在單獨的元素中，因此您至少可以將不同的漸變與（可能）不同的線條定義混合和匹配。此處定義的將水平拉伸以始終跨越其父元素的文本長度，但保持其stroke-width與字體大小的關系。使用.gradient_text svg屬性微調線條的位置。
h2 {
font-size: 64px;
color: #000;
font-family: Arial, sans-serif;
line-height: 1.5em;
margin: 0;
}
#gradient-line {
overflow: visible;
}
#gradient-line path {
vector-effect: non-scaling-stroke;
fill: none;
stroke-width: 0.2em;
stroke-linecap: round;
}
.gradient_text {
background: linear-gradient(90deg, #1FA30A 0.2%, #B9D124 70.4%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-weight: 500;
position: relative;
}
.gradient_text svg {
position: absolute;
overflow: visible;
left: 0.1em;
top: 1em;
width: calc(100% - 0.2em);
height: 0.5em;
}
.gradient_text.green svg {
stroke: url(#gradient-green);
}<svg width="0" height="0">
<linearGradient id="gradient-green">
<stop offset="0.002" stop-color="#1FA30A" />
<stop offset="0.704" stop-color="#B9D124" />
</linearGradient>
<symbol id="gradient-line" viewBox="0 0 10 5" preserveAspectRatio="none">
<path d="M0,4Q5,1 10,1" />
</symbol>
</svg>
<h2>Lorem <span class="gradient_text green">ipsum<svg><use href="#gradient-line" /></svg></span> dolor sit!</h2>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516156.html
標籤：csssvg线坡度