如何获得带有圆角的边框底线

Question

如您在图片上的“增强器”和“互联网可见性”下所看到的，我试图获得圆角下划线。

如您在摘要中所见，我已经完成了一半的工作。 但是我找不到一种方法可以在边框底部的上角创建半径（border-top-right / left-radius仅适用于border-top）。

你有什么解决办法吗？ 提前Thx

 p{ font-size: 30px; line-height: 30px; } .primary-underline{ text-decoration: none; border-bottom: 10px solid #06CC6B; border-bottom-right-radius : 10px; border-bottom-left-radius : 10px; line-height: 10px; display: inline-block; } 

 <p>Nous aidons les artisans, commerçants, startups et PME à <span class="primary-underline">augmenter</span> leur <span class="primary-underline">visibilité sur internet</span></p> 

Answer 1

使用放置在内容后面的伪元素创建下划线效果。

演示：（根据需要调整值）

 p{ font-size: 30px; line-height: 30px; } .primary-underline{ position: relative; display: inline-block; z-index:0; } .primary-underline:before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: -5px; height: 0; border: 10px solid #06CC6B; border-radius : 10px; } 

 <p>Nous aidons les artisans, commerçants, startups et PME à <span class="primary-underline">augmenter</span> leur <span class="primary-underline">visibilité sur internet</span></p> 

Answer 2

使用伪元素：

 p{ font-size: 30px; line-height: 30px; } .primary-underline{ text-decoration: none; display: inline-block; position:relative; z-index:0; } .primary-underline:before { content:""; position:absolute; z-index:-1; bottom:0; left:0; height:10px; width:100%; border-radius:10px; background:#06CC6B; } 

 <p>Nous aidons les artisans, commerçants, startups et PME à <span class="primary-underline">augmenter</span> leur <span class="primary-underline">visibilité sur internet</span></p> 

或者您可以考虑多个背景：

 p{ font-size: 30px; line-height: 30px; } .primary-underline{ text-decoration: none; display: inline-block; background: radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom right/10px 10px, radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom left /10px 10px, linear-gradient(#06CC6B,#06CC6B) bottom/calc(100% - 10px) 10px; background-repeat:no-repeat; } 

 <p>Nous aidons les artisans, commerçants, startups et PME à <span class="primary-underline">augmenter</span> leur <span class="primary-underline">visibilité sur internet</span></p> 

并通过一些CSS变量来更好地控制：

 p{ font-size: 30px; line-height: 30px; } .primary-underline{ --s:10px; /* height of the line */ --c:#06CC6B; /* color*/ text-decoration: none; display: inline-block; background: radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom right/var(--s) var(--s), radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom left /var(--s) var(--s), linear-gradient(var(--c),var(--c)) bottom/calc(100% - var(--s)) var(--s); background-repeat:no-repeat; } 

 <p>Nous aidons les artisans, commerçants, startups et PME à <span class="primary-underline">augmenter</span> leur <span class="primary-underline" style="--s:15px;--c:pink">visibilité sur internet</span> et aussi à <span class="primary-underline" style="--s:5px;--c:orange;">faire autre chose</span></p>