Webkit邊框半徑結合css3 translate3D出血

我在基於Webkit的瀏覽器中遇到問題，如果我向邊框添加邊框半徑，然後將-moz-translate3d應用到內部的ul（這是因爲在原始例如我使用的是flexslider幻燈片），邊框半徑不適用，並通過容器流血。Webkit邊框半徑結合css3 translate3D出血

爲了清楚地理解我在說什麼，這裏是一個關於這個問題的小例子。如果我刪除translate3d屬性，則應用邊框半徑。

HTML：

<div class="wrapper"> 
    <ul> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
    </ul> 
</div>

CSS：

.wrapper { 
    border-radius: 20px; 
    position: relative; 
    width: 500px; 
    height: 200px; 
    overflow: hidden; 
} 

.caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.8); 
    padding: 2rem; 
    -webkit-box-sizing: border-box; 
    width: 100%; 
    height: 3rem; 
    color: #fff; 
} 

ul { 
    width: 800%; 
    -webkit-transform: translate3d(-500px, 0, 0); 
} 

li { 
    float: left; 
    width: 500px; 
    height: 200px; 
    background-color: #000; 
    position: relative; 
} 

.caption p { 
    color: #fff; 
}

http://jsfiddle.net/R5L3K/12/

測試它都在Chrome最新的Mac和Windows版本。

在此先感謝！

來源

2013-01-23 Ariel

看起來規則是衝突的。你到底想達到什麼樣的目的？ – AlienWebguy

我只需要使邊框圓角，但使用translate3d屬性:) – Ariel

我得到你的問題，但爲什麼你需要那個屬性？看起來你只是在移動UL--爲什麼不使用'position：relative;左：-500px;'？ – AlienWebguy

我以前回答過這個問題。這是一個webkit的bug。

將此代碼添加到同一個選擇要添加邊框半徑過

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

http://jsfiddle.net/R5L3K/14/

老答案源 flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

來源

2013-01-23 09:48:36 2ne

你知道，這是最古怪的事情，我確實看到了這個問題，並嘗試過，但沒有奏效。現在呢，謝謝！ – Ariel

+1非常酷。每天學些新東西。 – AlienWebguy

我不知道它是如何工作的。但它確實如此。對晚間時間很好的追求。 –

出血停止，這是偉大的！我正在使用這個盒子，我在之前添加了一個箭頭。然而，這似乎在某種程度上神奇地使標籤消失之前的箭頭。有沒有什麼辦法解決這一問題？

span { 
position: relative; 
border-radius: 5px; 
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
} 

span:before { 
content: ''; 
width: 0; 
height: 0; 
top: 29px; 
right: 100%; 
visibility: hidden; 
position: absolute; 
border-width: 9px; /* 0.8em */ 
border-style: solid; 
border-color: transparent rgba(000,000,000,0.85) transparent transparent; 
}

來源

2013-06-11 22:01:16 Sebastian

你能總結一下你改變了什麼嗎？ – gcbenison

我想我想出了問題，只是沒有，如何解決它。由於箭頭位於箱外，因此消失。這就像使用溢出：隱藏。 – Sebastian

Webkit邊框半徑結合css3 translate3D出血

回答

相關問題