边界半径=背景出血

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

我知道，这不是你在等待的，但我必须这样说：使用图片。这不仅是因为可以消除所有浏览器的出血。与Chrome无情地扼杀你的按钮外观相比，你在Firefox上的流血问题无关紧要......检查并开始哭泣：（。

如果你想知道什么是错的：当你在同一个元素上使用border-radius和box-shadow：inset时，Chrome是完全无助的。这是一个已知的错误，你不能消除它，直到他们在浏览器中修复它（并判断他们如何“快速”响应一些错误报告 - 有些已经在两年前报告过，仍然没有解决，即使是用户提供了现成的解决方案 - 我认为我们不应期望Chrome在不久的将来能够正常运行。

[编辑]

另外，请注意：

• 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)";
}