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

【问题标题】：Adding Rounded rectangle css over text in Wordpress Navigation Menu在 Wordpress 导航菜单中的文本上添加圆角矩形 css
【发布时间】：2020-05-30 08:37:07
【问题描述】：

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

https://i.stack.imgur.com/w2HKF.jpg

【问题讨论】：

标签： css wordpress navigationbar

【解决方案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 项添加一个类，或者可能是必须应用矩形 css 的元素类（在这种情况下，我们想要对 Link2 进行舍入，因此我为其 li 元素赋予了一个名为 的类圆），然后给它边框，然后设置它的半径在代码中显示。

【讨论】：