CSS3边框和border-radius

Question

我遇到边框和边框半径问题。

以下是Chrome和Firefox的结果，Chrome渲染半径非常流畅，但firefox不是（与IE相同），我也附上了我的CSS。这是<a>代码

任何帮助将不胜感激。

#dot{
    width: 20px;
    height: 20px;
    background: #e10000;
    color: #FFF;
    line-height: 20px;
    text-align: center;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: -5px;
    position: absolute;
    left: 40px;
    top: 12px;
    border: 1px solid #EAEAEA;
    text-indent: initial;
    opacity: 1;
    visibility: visible;
    font-size: 1.1em;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

Answer 1

虚拟边框

sample

用标签包装 并使用宽度和高度的差异而不是边框​​

#dot_wrapper
, #dot_inner
{
    color: #FFF;
    line-height: 20px;
    text-align: center;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
/*
    border: 1px solid #EAEAEA;
*/
    text-indent: initial;
    opacity: 1;
    visibility: visible;
    font-size: 1.1em;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

#dot_wrapper
{
    background: #EAEAEA;
    width: 22px;
    height: 22px;
    left: 40px;
    top: 50px;
}

#dot_inner
{
    background: #e10000;
    width: 20px;
    height: 20px;
    left: 1px;
    top: 1px;
}

Answer 2

所有评论都或多或少都是正确的。实现完全跨浏览器相同性的唯一方法是在这种情况下的图像。我最近参加了位于加利福尼亚州SF的HTML5 dev conf的W3C小组会议，这个精确的标准（边界半径）被用作标准化甚至像边界半径这样的简单特征的难以置信的复杂性的一个例子。 （在这里阅读规范：http://www.w3.org/TR/css3-background/#the-border-radius）。基本上Roko是正确的，chrome实现了具有抗锯齿功能，即/ ff没有，至少使用你正在使用的版本/设置。

好消息是，对于拥有这些版本/设置的用户来说，这就是边界半径“只是看”它们的方式，因此你的眼睛不会在进攻上有所不同。

我会离开它，并且不要担心它。