在Wordpress导航菜单中的文本上添加圆角矩形css。

Question

我想更新Wordpress Astra主题的默认导航菜单，并试图在其中一个菜单中添加圆角矩形，如图所示，我应该在额外的CSS面板中添加什么？昨天刚开始学习CSS和Wordpress，我是个新手。

https:/i.stack.imgur.comw2HKF.jpg

Answer 1

试试这个。

.round {
  border: 2px solid white;
  border-radius: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-primary navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
    </li>
    <li class="nav-item round">
      <a class="nav-link" href="#">Link2</a>
    </li>

  </ul>
</nav>

添加一个类的导航条的li项或可能是元素类，其中rectange的CSS必须被应用（在这种情况下，我们要圆链接2，所以我已经给了一个类，其li元素称为 一轮)，然后给它加上边框，接着设置它的半径，如代码所示。