时间戳

首页 > 解决方案 > 如何在border-bottom 属性中创建圆角线边框？

html - 如何在border-bottom 属性中创建圆角线边框？

问题描述

我正在尝试创建一个风格化的下划线，结果我假装它是这样的：

我想要达到的目标：

我想要达到的目标

正如你所看到的，我想要的边界在它的末端是圆形的。但是在这里使用边界底部我到目前为止得到的：

到目前为止我的下划线

我的代码是这样的：

HTML

<nav class="navbar">
    <a id="index" href="#index">Home</a>
    <a href="#">Pokedéx</a>
    <a href="#">Legendaries</a>
    <a href="#">Documentation</a>
</nav>

和 CSS

.navbar > a {
    font-size: 1.5rem;
    margin: 0px 10px 0px 0px;
    text-decoration: none;
    color: #212121;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

.navbar > a:target {
    border-bottom: 4px solid #212121;
}

所以我想知道的是，是否有办法使边框框的边框（无论它们是底部、顶部、右侧、左侧，都无关紧要）变圆还是有更好的方法来设置此下划线的样式？你会怎么做？

非常感谢。

标签： htmlcss

解决方案

我通常::after为此使用伪元素

.navbar > a {
  position: relative; /* This is the reference for the after psuedo-element*/
  font-size: 1.5rem;
  margin: 0px 10px 0px 0px;
  text-decoration: none;
  color: #212121;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
}

.navbar > a:target::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* Negative height */
  width: 100%;
  height: 4px; /* Height of border */
  background-color: #212121;
  border-radius: 5rem; /* This can be any number but is normally set very high for the pill-shape */
}
<nav class="navbar">
  <a id="index" href="#index">Home</a>
  <a href="#">Pokedéx</a>
  <a href="#">Legendaries</a>
  <a href="#">Documentation</a>
</nav>

推荐阅读