css3 border-image的透明png問題

Question

我使用的是帶有透明部分的PNG圖像的border-image。問題在於div有background-color設置爲黑色。當我應用border-radius時，圖案的透明部分顯示div的黑色，而不顯示包含div的元素的背景。如何獲得border-radius忽略div的顏色。以下是有問題的代碼。

HTML

<header> 
    <div class="outerColumn"> 
     <div class="column clearfix"> 
      <h1>Company</h1> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">My Work</a></li> 
        <li><a href="#">About me</a></li> 
        <li><a href="#">Elements</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</header> 

CSS

body > header { 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2; 

    border-bottom:10px solid #0e0e0e; 
    -moz-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat; 
    -webkit-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat; 
    border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat; 
} 


header, footer { 
    width:100%; 
    background-color:#0e0e0e; 
    clear:both; 
} 

Answer 1

把邊框上有透明背景的包裝。

<div id="HeaderBorder"> 
    <header> 
     ... 
    </header> 
</div> 

<style type="text/css"> 
    #HeaderBorder { /* border image stuff + transparent background */ } 
</style> 

Answer 2

您可以設置背景剪輯填充盒設置背景顏色大小的填充盒無邊框：

-moz-background-clip: padding; 
-webkit-background-clip: padding; 
background-clip: padding-box; 

更多信息，請參見http://css-tricks.com/transparent-borders-with-background-clip/。