html - 境界半径の後に角の白いピクセルを削除する方法

Question

角が丸いシンプルな順序付けられていないリストを作成しました。リスト項目を選択すると、アクティブな状態を示すために背景が青くなります。境界半径がない場合、すべてが見栄えがします。

ただし、4px の境界半径を使用してすべてのエッジを丸くし、下部の角が丸くなっている最後のリスト項目 (#5) を選択すると、青いアクティブ状態の角に小さな白いピクセルが表示されるようになりました。これが起こらないようにする方法を理解できないようです。助けてくれてありがとう。.

http://jsfiddle.net/8PN8Z/

HTML

<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>

CSS

.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 */ 
}

JS

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

score 0 · Accepted Answer

わかった。これは物事を単純化すると思います。見てみな。お役に立てば幸いです。

http://jsfiddle.net/sheriffderek/8WTam/

<ul class="test-list">
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
</ul>

CSS：

/* border box - google it. it rules*/ 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

.test-list {
    float: left;
    overflow: hidden;
    list-style: none;

    /* just to show the properly containing ul */  
    margin: 2em;
    background-color: rgba(0,0,0,.05);
    padding: 1em;
}

.test-list li {

}

.test-list a {
    display: block;
    float: left;
    clear: left;
    background-color: #f06;
    padding: 1em 2em;
    min-width: 12em;

    color: white;
    text-decoration: none;
    border: 3px solid rgba(0,0,0,1);
    border-bottom: 0;
}

.test-list a:hover {
    background-color: lightblue;
    color: black;
}

.test-list li:first-of-type a {
    -webkit-border-radius:.4em .4em 0 0;
    border-radius: .4em .4em 0 0;
}

.test-list li:last-of-type a {
    -webkit-border-radius: 0 0 .4em .4em;
    border-radius: 0 0 .4em .4em;
    border-bottom: 3px solid black;
}

score 0 · Accepted Answer

まず、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/

html - 境界半径の後に角の白いピクセルを削除する方法

2 に答える 2

Related

Reference