Гость
Как удалить белые пиксели на углах после границы-радиуса
Сообщение
Гость » 27 фев 2025, 08:00
Я создал простой неупорядоченный список с округленными углами, при выборе элемента списка я хочу, чтобы фон стал синим, чтобы показать активное состояние. Когда у меня нет границы-радиуса, все выглядит великолепно. < /P>
Однако, когда я использую границу радиуса 4px, чтобы округлить все края, и выбираю последний элемент списка (#5) с закругленными углами внизу, синее активное состояние теперь показывает маленькие белые пиксели на углах. Кажется, я не могу понять, как предотвратить это. Спасибо за помощь. .
http://jsfiddle.net/8pn8z/
кодовый фрагмент:
$(function() {
$('a.tab-link').click(function() {
$('a.tab-link').removeClass('active-tab')
$(this).addClass('active-tab')
});
});< /code>
Код: Выделить всё
.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 */
}< /code>
[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
1740632400
Гость
Я создал простой неупорядоченный список с округленными углами, при выборе элемента списка я хочу, чтобы фон стал синим, чтобы показать активное состояние. Когда у меня нет границы-радиуса, все выглядит великолепно. < /P> Однако, когда я использую границу радиуса 4px, чтобы округлить все края, и выбираю последний элемент списка (#5) с закругленными углами внизу, синее активное состояние теперь показывает маленькие белые пиксели на углах. Кажется, я не могу понять, как предотвратить это. Спасибо за помощь. . http://jsfiddle.net/8pn8z/ кодовый фрагмент: $(function() { $('a.tab-link').click(function() { $('a.tab-link').removeClass('active-tab') $(this).addClass('active-tab') }); });< /code> [code].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 */ }< /code> [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] [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/14912401/how-to-remove-white-pixels-on-the-corners-after-border-radius[/url]