一个div两层border实现

[weijiyang]

<div id="outline">outlie实现多重边框</div>  

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;*/  
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/  
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/  
} 

<div id="boxShadow">boxshadow实现多重边框(外投影)</div>  
#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/  
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/  
} 

<div id="moreboxShadow">boxshadow实现多重边框(内投影)</div>  
/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/  
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/  
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/  
}