Safari中的透明圆形边框

在Safari中使用带圆角的Alpha透明度边框时，背景将剪辑到边框中。即使使用background-clip：padding-box，也会发生这种情况。我知道我可以简单地将h1包装在span/div/etc中并给出边框，但是我想知道是否有人知道是否可以在没有更多标记的情况下做到这一点。Safari中的透明圆形边框

这里是我使用的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

来源

2013-07-16 Sean Beck

什么版本的safari？ – koningdavid

据我所知，它曾经是[webkit bug]（https://bugs.webkit.org/show_bug.cgi?id=23166）。我猜你正在Windows上测试Safari？如果是这样的话，那么Apple停止在Windows上支持Safari，所以它不会被修复。 – MiniRagnarok

这是在OSX上的最新版本的Safari。 –

它是更多钞票，你所问的已经在这里讨论： CSS rounded corners bug in Safari? ？看来Safari对你正在做的事情有一些限制。希望有所帮助。

来源

2013-07-17 17:52:29

Safari中的透明圆形边框

回答

相关问题