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/。