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中的透明圓形邊框

回答

相關問題