css多样边框

半透明边框

div{
border: 10px solid rgba(255,255,255,.5); 
background: white; 
background-clip: padding-box;  /*关键代码*/
}

仅仅将边框颜色设为半透明是不能实现半透明边框的，因为默认情况下，背景会延伸到边框所在区域下层，也就是说边框以内的都是背景。

通过设置background-clip:padding-box(默认是border-box)，让背景只延伸到padding下层，就是通过padding外沿来裁剪背景，达到半透明边框。

多重边框

/* box-shadow 实现方案 */
div {
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px pink,
            0 2px 5px 15px rgba(0,0,0,.6);    
}

/* border/outline 实现方案 */
div {
    border: 10px solid #655;
    outline: 5px solid pink;
}

box-shadow：实现方案通过box-shadow 的第四个参数（扩张半径）。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法，可创建任意数量的投影，因此我们就可实现多重边框效果。

border/outline：border和outline各代表一层边框。这个方案可实现虚线边框，但它只能实现两层边框。

边框内圆角

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 关键代码 */
    border-radius: .8em;
}

outline 不会跟着元素的圆角走（因而显示出直角），但 box-shadow 确实会的，因此，将两者叠加到一起，box-shadow（其扩张值大概等于 border-radius 值的一半） 会刚好填补 outline 和容器圆角之间的空隙，因此可达到我们想要的效果。