css3 border-image的透明png问题

Question

我正在使用border-image具有透明部分的PNG图像.问题是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

您可以将background-clip设置为padding-box,将背景颜色大小设置为不带边框的填充框:

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

有关更多信息,请参见http://css-tricks.com/transparent-borders-with-background-clip/.