Как удалить белые пиксели по углам после border-radiusCSS

Разбираемся в CSS
Ответить
Anonymous
 Как удалить белые пиксели по углам после border-radius

Сообщение Anonymous »

Я создал простой неупорядоченный список с закругленными углами. При выборе элемента списка я хочу, чтобы фон стал синим, чтобы показать активное состояние. Когда у меня нет радиуса границы, все выглядит великолепно.
Однако, когда я использую радиус границы 4 пикселя, чтобы скруглить все края, и выбираю последний элемент списка (#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 */
}

Код: Выделить всё



[list]
[*]testing
[*]
[url=#]
1 test-1
[/url]

[*]
[url=# ]
2 test-2
[/url]

[*]
[url=/theme/inspiring]
4 test-4
[/url]

[*]
[url=#]
5 test-5
[/url]

[/list]




Подробнее здесь: https://stackoverflow.com/questions/149 ... der-radius
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»