WebKit邊框半徑和轉換錯誤

在谷歌瀏覽器的最新穩定版本：版本31.0.1650.63米（Canary也），當涉及到邊框半徑和過渡時仍然存在一個錯誤。應用邊框半徑的元素內部的內容在動畫結束之前不會被剪裁。WebKit邊框半徑和轉換錯誤

我已經成功通過轉換「頂」和「左」的屬性，而不是平移X /平移Y去解決它

http://codepen.io/iki_xx/pen/wCFuo

不過，我似乎無法找到動態的透明的替代品。

http://codepen.io/iki_xx/pen/mspgE

是否有混濁的位置嗎？

來源

2013-12-16 Ivan V.

您可以修復它2種方式：

.thumb { 
    position:relative; 
    overflow: hidden; 
    width:100%; 
    border: 10px solid red; 
    border-radius:55px; 
    &:hover { 

     .caption { 
     background-color:red; 
     } 
     } 
    } 
    .caption { 
     position: absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     background-color:transparent; 
     border-radius: 35px; 
    @include transition(all 3s ease-in-out); 
    }

一）設置邊界半徑在內部元件

二）設置背景顏色：透明和過渡是

來源

2013-12-16 20:50:04 vals

使用「背景透明」可以做到這一點。此外，不需要在「.caption」元素上設置邊框半徑。 http://codepen.io/iki_xx/pen/HIcEJ –

老實說，最簡單的解決方案也爲您的字幕提供了一個（略小）border-radius，像這樣：

.caption { 
    ... 
    border-radius:30px; 
}

See a demo of this fix。

來源

2013-12-16 20:46:23 egid

我已經試過了，但只有當標題與邊框顏色相同時纔有效，但情況並非總是如此。 –

WebKit邊框半徑和轉換錯誤

回答

相關問題