Bootstrap 渐变背景渲染不正确

Question

我的导航栏中有汉堡包图标的背景渐变。正如您在代码片段结果中看到的那样，它的左右两侧有一些奇怪的 "borders"。

如何让这些边框消失？

.btn-primary {
  border-color: transparent !important;
  background-color: transparent !important;
  display: inline-block;
  height: 40px;
  background: #0080eb;
  background: linear-gradient(90deg,#0080eb 0,#00d3eb 100%);
  color: #fff;
  font-size: 13px !important;
  font-weight: 700;
  border-radius: 20px !important;
  padding: 0 9px !important;
  line-height: 40px;
  box-shadow: 0 10px 13px -10px rgba(0,128,235,.75);
}
.bg-primary.container {
  background-color:transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="wrapper-navbar" itemscope="" itemtype="http://schema.org/WebSite" class="fixed-top white-transp-gradient">

  <a class="skip-link sr-only sr-only-focusable" href="#content">Salta al contenuto</a>

    <nav class="navbar navbar-expand-md navbar-light bg-primary container">

      <button class="navbar-toggler btn-primary" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- The WordPress Menu goes here -->
      <div id="navbarNavDropdown" class="collapse navbar-collapse">
      <ul id="main-menu" class="navbar-nav ml-auto">
        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-13 nav-item"><a title="Home" href="http://example.test/" class="nav-link">Home</a></li>

      </ul>
</div>     
     
   </nav><!-- .site-navigation -->

  </div>

Answer 1

这是 border 问题，添加 border: 0 !important 就可以了，检查下面：-

.btn-primary {
  border-color: transparent !important;
  background-color: transparent !important;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #0080eb;
  background: linear-gradient(90deg,#0080eb 0,#00d3eb 100%);
  color: #fff;
  font-size: 13px !important;
  font-weight: 700;
  border-radius: 20px !important;
  padding: 0 9px !important;
  line-height: 40px;
  box-shadow: 0 10px 13px -10px rgba(0,128,235,.75);
  border: 0 !important;
}
.bg-primary.container {
  background-color:transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="wrapper-navbar" itemscope="" itemtype="http://schema.org/WebSite" class="fixed-top white-transp-gradient">

  <a class="skip-link sr-only sr-only-focusable" href="#content">Salta al contenuto</a>

    <nav class="navbar navbar-expand-md navbar-light bg-primary container">

      <button class="navbar-toggler btn-primary" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- The WordPress Menu goes here -->
      <div id="navbarNavDropdown" class="collapse navbar-collapse">
      <ul id="main-menu" class="navbar-nav ml-auto">
        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-13 nav-item"><a title="Home" href="http://example.test/" class="nav-link">Home</a></li>

      </ul>
</div>     
     
   </nav><!-- .site-navigation -->

  </div>

Bootstrap 渐变背景渲染不正确

Bootstrap gradient background not rendering correctly

html

css

gradient

bootstrap-4