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

Question

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

如片段所示，我已经完成了一半的工作。但是我找不到一种方法来创建边框底部上角的半径（border-top-right / left-radius仅适用于border-top）。

您有什么解决方案吗？ 提前谢谢

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(#06CC6B 66%,transparent 68%) bottom right/10px 10px,
    radial-gradient(#06CC6B 66%,transparent 68%) 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{
  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(#06CC6B 66%,transparent 68%) bottom right/var(--s,10px) var(--s,10px),
    radial-gradient(#06CC6B 66%,transparent 68%) bottom left/var(--s,10px) var(--s,10px),
    linear-gradient(#06CC6B,#06CC6B) bottom/calc(100% - var(--s,10px)) var(--s,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" style="--s:15px">visibilité sur internet</span> et aussi à <span class="primary-underline" style="--s:5px">faire autre chose</span></p>