css mac webkit瀏覽器（safari/chrome）溢出隱藏的邊框半徑錯誤

我在Mac上使用chrome或safari瀏覽器呈現問題。佈局是這樣的：css mac webkit瀏覽器（safari/chrome）溢出隱藏的邊框半徑錯誤

<a href="pdf/bus.pdf" class="circle_wrapper"> 
    <span class="business"></span> 
    <span class="title">BUSINESS SOLUTIONS</span> 
    <span class="small_title">SEE OUR BROCHURE </span> 
    <div class="circle_filler"></div> 
    <img src="images/image_logo.png" alt=""> 
</a>

和CSS

.circle_wrapper {margin-right: 40px; float: left; width: 286px; height: 286px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background-color: transparent; position: relative; top:0; left:0; overflow:hidden; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-decoration: none;} 
.circle_wrapper.last {margin-right:0px;} 
.circle_wrapper img {position:absolute; z-index:-2; border:0;} 
.circle_filler {width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; left:-380px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;} 
.title {color: #ffffff;position: absolute; left:40px; top: 150px;width: 120px; font: 400 22px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center;} 
.small_title {color: #ffffff;position: absolute; left:80px; top: 220px;width: 120px; font: 400 15px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center; opacity:0;} 
.circle_wrapper:hover .small_title {opacity: 1;} 

.circle_wrapper:hover .circle_filler{width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;left: -150px;} 
.circle_wrapper:hover .title {left: 80px;}

您可以查看它住在這裏 - > www.advicity.ro

如果你將鼠標懸停在圈子裏，藍色的背景不會隱藏。鑑於它是一個特定的錯誤，我的搜索是有限的，我發現所有的答案都沒有解決它。

任何想法？（如果你有什麼可行的，解釋將有助於未來的參考）

謝謝！

來源

2013-07-03 Mihai

請創建http://jsfiddle.net/一個孤立的演示，幷包括兩個截圖你的帖子：一個顯示什麼是錯的，一個顯示你的期望。編輯您的問題以包含此信息。不要忘記提及瀏覽器版本。 –

您是否嘗試過邊框：.circle_wrapper上的透明對象？這可能是你的答案 –

可能重複[CSS邊框半徑不裁剪圖像在Webkit]（http://stackoverflow.com/questions/8705249/css-border-radius-not-trimming-image-on-webkit） – cimmanon

Safari瀏覽器壞了，當談到邊界半徑微調：-s

你快速的解決辦法是增加

.circle_wrapper{border:60px solid #FFF; margin:-30px;}

而且，改變從像素的邊界半徑，以百分比，如果你想圈出來，最好的辦法就是製作border-radius:50%;

然後讓main_wrapper從950到980px; :)大功告成:)

其他更復雜的解決方案是使用口罩：這裏更多：https://www.webkit.org/blog/181/css-masks/

來源

2013-07-03 16:50:29 Eek

css mac webkit瀏覽器（safari/chrome）溢出隱藏的邊框半徑錯誤

回答

相關問題