html - 如何去除 border-radius 后 Angular 上的白色像素

Question

我创建了一个带圆 Angular 的简单无序列表，当选择一个列表项时，我希望背景变为蓝色以显示事件状态。当我没有 border-radius 时，一切看起来都很棒。

但是，当我使用 4px 的 border-radius 来圆化所有边缘，并选择底部带有圆 Angular 的最后一个列表项 (#5) 时，蓝色事件状态现在在 Angular 上显示小的白色像素.我似乎无法弄清楚如何防止这种情况发生。谢谢你的帮助。 .

http://jsfiddle.net/8PN8Z/

代码片段:

$(function() {
  $('a.tab-link').click(function() {
    $('a.tab-link').removeClass('active-tab')
    $(this).addClass('active-tab')
  });
});

.left-dash {
  background: #444;
  height: 500px;
}

.left-dash div {
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
}

.left-dash div ul li:first-child,
.left-dash div ul li:first-child a {
  -webkit-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}

.left-dash div ul li:last-child,
.left-dash div ul li:last-child a {
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}

.dash-stats-3 {
  width: 220px;
  margin-bottom: 17px;
  background: #9f9f9f;
  -webkit-background-clip: padding-box;
  /* for transparent border with solid bg - Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
  border-radius: 0px;
  border: 1px solid rgba( 0, 0, 0, 0.15);
  box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
  -o-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
  font-family: 'Museo Sans W01 700' san-serif;
  font-size: 14px;
  color: #828282;
  text-shadow: 0px 1px 1px #FFFFFF;
  font-weight: normal !important;
}

.dash-stats-3 ul li a,
.dash-stats-3 ul li:first-child {
  height: 41px;
  border-bottom: solid rgba( 0, 0, 0, 0.15) 1px;
  border-top: solid rgba(255, 255, 255, .65) 1px;
}

.left-dash div ul li:last-child,
.left-dash div ul li:last-child a {
  border-bottom: none;
}

.dash-stats-3 ul li a {
  position: relative;
  line-height: 43px;
  display: block;
}

.dash-stats-3 ul li a.active-tab {
  z-index: 120;
  border-top: 1px solid #5b82a7;
  background: #4e81be;
  /* Old browsers */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-dash">
  <div class="dash-stats-3">
    <ul class="dash-stats-3-ul">
      <li><span id="explore-themes">testing</span></li>
      <li>
        <a href="#" class="tab-link" data-remote="true">
          <span class="ss-pika ss-icon">1</span><span class="theme"> test-1</span>
        </a>
      </li>
      <li>
        <a href=# "" class="tab-link" data-remote="true">
          <span class="ss-pika ss-icon">2</span><span class="theme"> test-2</span>
        </a>
      </li>
      <li>
        <a href="" class="tab-link" data-remote="true">
          <span class="ss-pika ss-icon">3</span><span class="theme"> test-3</span>
        </a>
      </li>
      <li>
        <a href="/theme/inspiring" class="tab-link" data-remote="true">
          <span class="ss-pika ss-icon">4</span><span class="theme"> test-4</span>
        </a>
      </li>
      <li>
        <a href="#" class="tab-link" data-remote="true">
          <span class="ss-pika ss-icon">5</span><span class="theme"> test-5</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

首先，给 active-tab 一个半径。

.dash-stats-3 ul li a.active-tab {
    z-index:120;
    border-top: 1px solid #5b82a7;
    background: #4e81be; /* Old browsers */ 
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;  
}

确保它小于 li 的半径 (2px)。

并在默认状态下移除 a 的半径。删除它。

.left-dash div ul li:last-child a{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

保留这个。

.left-dash div ul li:last-child{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

查看:http://jsfiddle.net/FcXVY/

问题在于您为子元素提供了与父元素相同的边框半径。即使父元素没有边框，也会显示一些微小的像素，如果有边框，那就更糟了。检查一下:http://jsfiddle.net/UVTJQ/