Question

我想知道如何在链接按钮上获得圆角。现在它是四舍五入的，但不是真的。很抱歉，如果以前曾有人问过我，但我找不到任何东西。这是我的代码：

nav {
  text-align: center;
}

nav ul{
margin: 0;
padding: 0;
list-style: none;
}

nav li {
background-color: #221e1f;
display: inline-block;

position: relative;
}

nav a{
  border-radius: 25px;
  text-decoration: none;
  color: white;
  background: #221e1f;
  padding: 20px 40px;
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  transition-duration: 0.5s;
}

nav a:hover{
    background: #666666;
}

nav a::before{
content: '';
display: block;
height: 5px;
width: 0%;
position: absolute;
top: 0;
}

nav a:hover::before{
  width: 100%;
}

<nav>
  <ul>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</nav>

现在，当您将鼠标悬停在其上时，您会看到它已被四舍五入，但它仍然看起来像一个方块。

Answer 1

此问题是您在li上设置了背景颜色，因此您看到的“块”是li，而不是锚点。从列表项中删除背景将解决此问题。

nav {
  text-align: center;
}

nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

  nav li {
    display: inline-block;
    position: relative;
  }

    nav a {
      border-radius: 25px;
      text-decoration: none;
      color: white;
      background: #221e1f;
      padding: 20px 40px;
      display: block;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      transition-duration: 0.5s;
    }

      nav a:hover{
        background: #666666;
      }

      nav a::before{
        content: '';
        display: block;
        height: 5px;
        width: 0%;
        position: absolute;
        top: 0;
      }

      nav a:hover::before{
        width: 100%;
      }

<nav>
  <ul>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</nav>

Answer 2

您应将圆角边界半径添加到导航a：hover {}

您还可以添加动画，以使按钮从鼠标移到鼠标上方的过渡效果更加美观。这里是一个示例“按钮阴影动画的动画”，您可以使用带有边框的相同内容：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate2

希望有帮助！

具有圆角的超链接不是真正的圆角

2 个答案: