边界半径=背景出血 [英] Border Radius = Background Bleed

问题描述

好的，所以我一直通过像background-clip：padding-box;的答案。虽然它使最终产品看起来有点好一点，但它仍然不能完全解决背景颜色在边界外出血的问题。

$ b

这是问题的屏幕截图： b

用于按钮的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; 
} 
  

解决方案

等待，我知道，但我不得不这样说：使用图像。这不仅是因为可以消除所有浏览器上的流失。 Firefox上的流失问题与Chrome无情地杀死了你的按钮的外观无关...检查它并开始哭泣：（。

如果你想知道什么是错的：当你使用border-radius和box-shadow：inset在同一个元素时，chrome是完全无奈的。这是一个已知的错误，你不能消除它，直到他们在浏览器中修复它（和判断如何快速他们会回应一些错误报告 - 有些报告在两年前，仍然没有解决，即使用户提供一个即时的解决方案 - 我想我们不应该期望Chrome在不久的将来正常工作。）

另请注意：

• Firefox会产生出血效果


• Opera不会呈现CSS3渐变


• li>
  
• Chrome以最差的方式失败。

这将使你的按钮正确。在这种情况下保持使用CSS3是有意义的吗？

Ok so I've been through answers like "background-clip: padding-box;" and while it makes the end product look a little better, it still doesn't completely solve the problem of the background color bleeding outside of the border. Does anyone have a real solution to this issue?

Here's a screenshot of the issue:

CSS Used For Buttons

#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;
}

解决方案

It's not what you're waiting for, I know, but I have to say this: use an image. This is not only due to the possibility to eliminate the bleed on all browsers. Your bleed problem on Firefox is nothing compared to how Chrome mercilessly slaughters the look of your buttons... Check it and start crying :(.

In case you're wondering what's wrong: Chrome is utterly helpless when you use border-radius and box-shadow:inset on the same element. It's a known bug and you can't eliminate it until they fix it in the browser (and judging by how "fast" they are to respond to some bug reports - some have been reported two years ago and still are unsolved, even when the users offer a ready solution - I think we shouldn't expect Chrome to work properly in the near future).

[EDIT]

Also, note this:

• Firefox produces the bleed effect
• Opera doesn't render CSS3 gradients
• IE doesn't render box shadow
• Chrome fails in the worst manner possible

So... there isn't a single browser which renders your button correctly. Does it make sense to keep using CSS3 in this case?

这篇关于边界半径=背景出血的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！