CSS透明与多重边框设计

1 透明边框

使用 CSS 中的半透明颜色，比如 rgba() 和 hsla(),代码设计如下所示：

• border: 10px solid hsla(0,0%,100%,.5);
• background: white;
   

但我们连使用半透明颜色不能实现半透明边框，我们的边框其实是存在的，默认情况下， 背景会延伸到边框所在的区域下层。从背景与边框（第三版）  （http://w3.org/TR/css3-background）开 始，我们可以通过 background-clip 属性来调整：

background-clip 属性	样式结果
border-box	背景会被元素的 border box （边框的外沿框）裁切掉
padding-box	浏览器就会用内边距的外沿来把背 景裁切掉

• border: 10px solid hsla(0,0%,100%,.5);
• background: white;
• background-clip: padding-box;

可以看到这个完美的结果

2、多重边框

box-shadow方案（不会影响布局，也不会受到box-sizing属性影响，主要通过内边距或外边距模拟出边框所需要占据的空间；也不会响应鼠标事件，比如悬停或点击，如果需要的话，box-shadow属性加上inset关键字，视投影绘制在元素的内圈，此时需要增加额外的内边距来腾出足够的空隙；不能产生虚线边框效果。）

background:yellowgreen;

box-shadow:0 0 0 10px #655;

                     0 0 0 15px deeppink;

                     0 2px 5px 15px rgb(0,0,0,.6);

outline方案（只需要两层边框，可以产生虚线边框效果；可以通过outline-offset属性开控制它跟元素边缘之间的距离，属性甚至可以接受负值；只适用双层边框效果；不一定会贴合bordor-radius属性产生的圆角，它的描边可能还是直角的；描边可以不是矩形，最好在不同的浏览器中完整地测试最终效果）

background:yellowgreen;

border:10px solid #655;

outline:5px solid deeppink;