Anonymous
Как удалить белые пиксели по углам после border-radius
Сообщение
Anonymous » 02 июл 2024, 04:00
Я создал простой неупорядоченный список с закругленными углами. При выборе элемента списка я хочу, чтобы фон стал синим, чтобы показать активное состояние. Когда у меня нет радиуса границы, все выглядит великолепно.
Однако, когда я использую радиус границы 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
1719882015
Anonymous
Я создал простой неупорядоченный список с закругленными углами. При выборе элемента списка я хочу, чтобы фон стал синим, чтобы показать активное состояние. Когда у меня нет радиуса границы, все выглядит великолепно. Однако, когда я использую радиус границы 4 пикселя, чтобы скруглить все края, и выбираю последний элемент списка (#5) с помощью закругленные углы внизу, в активном синем состоянии теперь отображаются маленькие белые пиксели по углам. Кажется, я не могу понять, как предотвратить это. Спасибо за любую помощь. . http://jsfiddle.net/8PN8Z/ Фрагмент кода: [code]$(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] [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]