css3的background-clip来制作半透明边框

弹出框的html代码如下：

1. <div class="search-popup-window advise" id="lightbox">
2.   <img src="style/images/taobao-form.png" alt="" width="470" height="349"/>
3. </div>

弹出框的css代码如下：

#lightbox { 
    position: absolute; top: 0px;left: 0px;
    display:none; 
    width: 470px; height: 350px;
    background-color: white;
    text-align: center;
    padding:8px;		
    
    /* 关键代码部分 */
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */		 
    border: 8px solid rgba(0,0,0,0.3);
                
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px; 
            
}    

脚本部分不是这个教程的重点，明河就不贴出来了。css部分的代码看似很多，关键是里面的以下这几行代码：

#lightbox { 	
    
    /* 关键代码部分 */
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */		 
    border: 8px solid rgba(0,0,0,0.3);
            
}
    

为什么利用background-clip可以产生半透明的边框效果呢？接下来明河来说说background-clip。

background-clip这个css3的属性，我相信很多朋友都不是特别熟悉，这里推荐阅读怿飞的一篇文章：《background-clip 与 background-origin 的一则运用》 ,background-clip用于设置背景显示模式，共有border、padding、content三种模式，用于控制背景覆盖容器的范围，而默认的显示模式是border（并不是所有的默认显示模式都是border，IE下有特例，可以看阅怿飞的那篇文章），即背景覆盖无法超出边框（有覆盖到边框）；而当demo中将其值设置为padding时，也就是说背景只能覆盖内盒，边框是不存在背景的！有点抽象，还是来看个图：

上图演示了background-clip三个模式下的背景边界。

由于demo中将background-clip设置为padding，背景颜色（白色）不在存在于边框，当你的边框是带有透明度设置时（demo中是0.3），就会产生这种半透明的边框效果！留意不同浏览器的设置方法是有些差异的，而IE是不支持的！这是这种方案的唯一弊端。

background-clip密切相关的还有个background-origin属性，background-origin的用法留待日后再讲解。