Safari中的透明圆角边框

Question

在Safari中，如果使用带有圆角的alpha透明度边框，则背景会剪切到边框内部。即使使用background-clip: padding-box也会发生这种情况。我知道可以简单地将h1包装在span/div等标签中并给它们添加边框，但我想知道是否有可能在不添加更多标记的情况下实现这一点。

以下是我正在使用的CSS：

    h1.inner {
    background: #ffa51f;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    border-top: 10px solid rgba(33,33,33,.05);
    border-bottom: 10px solid rgba(33,33,33,.05);
    border-right: 10px solid rgba(33,33,33,.05);
    color: #FFF;
    display: inline-block;
    font-size: 47px;
    font-weight: 800;
    line-height: 1.2;
    padding: 0 .6em 0 0;
    position: relative;
    text-transform: uppercase;
    text-align: left;
    background-clip: padding-box;
    box-sizing: border-box;
}
h1.inner:before {
    background: #ffa51f;
    border-top: 10px solid rgba(33,33,33,.05);
    border-bottom: 10px solid rgba(33,33,33,.05);
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    width: 9999px;
    background-clip: padding-box;
    box-sizing: border-box;
}

h1.inner:before {
    right: 100%;
}

以下是一个 jsfiddle 和屏幕截图，展示了我所说的例子。

http://jsfiddle.net/39Xen/

http://imgur.com/Hp2bzBm

- Sean Beck

---

Safari的哪个版本？ - koningdavid

据我所知，这曾经是一个webkit bug。我猜你是在测试Windows上的Safari？如果是这样的话，那么苹果已经停止支持Windows上的Safari，所以它不会被修复。 - MiniRagnarok

这是在OSX上，使用最新版本的Safari。 - Sean Beck

你为什么要使用:before来实现这样一个简单的效果？ - user1752532

我将整个网站放在一个居中的包装器中。使用 before 和 after 伪元素使我能够轻松地拥有全屏宽度的 div，而不受屏幕大小的限制。 - Sean Beck

Answer 1

你所询问的问题是否已经在这里得到解决： Safari中CSS圆角bug？ ？ 看起来Safari对于你尝试做的事情有一些限制。 希望能帮到你。

- Mr. Concolato