Пограничный радиус = фоновое кровотечение

Question

Хорошо, так что я получил ответы типа "background-clip: padding-box;" хотя конечный продукт и выглядит немного лучше, он еще не полностью решает проблему обесцвечивания фона за пределами границы. У кого-нибудь есть реальное решение этой проблемы?

Вот скриншот проблемы:

CSS, используемый для кнопок

#footer #pager li a {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    float: left;
    color: #444 !important;
    text-decoration: none !important;
    background-clip: padding-box !important;
    padding: 8px 12px;
    background-color: #ccc;
    border: 1px solid #000;
}

Answer 1

Это не то, что вы ждете, я знаю, но я должен сказать следующее: использовать изображение . Это не только из-за возможности устранить кровотечение во всех браузерах. Ваша проблема с кровотечением в Firefox ничто по сравнению с тем, как Chrome безжалостно убивает внешний вид ваших кнопок ... Проверьте это и начните плакать: (.

В случае, если вам интересно, что не так: Chrome совершенно беспомощен, когда вы используете border-radius и box-shadow: inset для одного и того же элемента. Это известная ошибка, и вы не можете устранить ее, пока они не исправят ее в браузере (и судя по тому, насколько «быстро» они реагируют на некоторые сообщения об ошибках - о некоторых сообщалось два года назад и до сих пор не решено, даже когда пользователи предлагают готовое решение - я думаю, мы не должны ожидать, что Chrome будет работать должным образом в ближайшем будущем).

[EDIT]

Также обратите внимание:

• Firefox производит эффект кровотечения
• Opera не отображает градиенты CSS3
• IE не отображает тень от блока
• Chrome выходит из строя наихудшим образом

Итак ... нет ни одного браузера, который правильно отображает вашу кнопку. Имеет ли смысл в этом случае продолжать использовать CSS3?

Answer 2

Решение было бы использовать изображение вместо фона для ссылки, с overflow: hidden:

.button{
    margin: 45px 0;
    width: 222px;
    height: 40px;
    display: block;
    border: 1px solid #ebebeb;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden !important;
}

.button img {
    width: 222px;
    height: 40px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff799), to(#fdc689));
    background: -webkit-linear-gradient(top, #fff799, #fdc689);
    background: -moz-linear-gradient(top, #fff799, #fdc689);
    background: -o-linear-gradient(top, #fff799, #fdc689);
    background: -ms-linear-gradient(top, #fff799, #fdc689);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689', GradientType=0)";
}