图注：背景默认会扩展到边框区域下方
虽然这和你使用不透明的实线边框是一样的，但在这个示例中，它完全推翻了我们的预期。结果看起来是纯白色的边框，实际上是一个半透明白色的边框，然后在它下面是白色的背景色。
在 CSS 2.1 中，这就是 background 的工作原理。我们不得不接受和使用它。值得庆幸的是，在Backgrounds & Borders Level 3中，我们已经可以使用background-clip 属性来调整这一效果。background-clip的默认值为border-box，也就是说，背景色会填充到容器边框以及边框以内的地方，所以我们只需要将其修改为padding-box（让背景色在容器的内边距以及内边距以内填充）就可以实现所需要的效果了：
CSS Code复制内容到剪贴板
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
更完善的效果如下图所示：
图注：修正了 background-clip 的问题
总结
虽然在border-color上能运用rgba()、hsla()设置边框为半透明或完全透明，如果元素设置了背景颜色或背景图片的时候，会直接影响边框的透明颜色效果。特别是，要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。要解决这一问题，可以通过CSS3的background-clip来修正。@Chris Coyier早在2010年的时候就在CSS-Tricks详细介绍过这方面的知识。
