我創建了一個簡單的圓角無序列表，當選擇一個列表項時，我希望背景變成藍色以顯示活動狀態。當我沒有邊界半徑時，一切看起來都很棒。
然而，當我使用4px的邊界半徑來圓角化所有的邊，并選擇底部帶有圓角的最后一個列表項(#5)時，藍色活動狀態現在在角上顯示小的白色像素。我似乎想不出如何防止這種情況發生。感謝任何幫助。。
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>首先，給活動標簽一個半徑。
.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;
}確保它小于李的半徑，(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/
好的。我認為這簡化了事情。看看這個。希望有幫助。
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;
}出現此問題是因為列表項和鏈接的邊框半徑不同。li和a元素之間的半徑差異導致白色像素出現。
要修復此問題，請僅將邊框半徑應用于a元素，而不是li元素。此外，確保在父容器上設置overflow: hidden來處理可能溢出父容器邊界半徑的任何子元素。
您的CSS應該看起來像這樣:
.left-dash div ul li:first-child a {
border-radius: 4px 4px 0 0;
}
.left-dash div ul li:last-child a {
border-radius: 0 0 4px 4px;
}并移除邊框半徑。左破折號div ul li:第一個孩子和。左破折號div ul li:最后一個子選擇器。
這應該可以解決出現白色邊角的問題。