‘半透明边框’真的是你想的那样就实现了吗？
提到半透明的颜色你会想到 rgba() hsla(),给一个div加一个半透明的边框你可能会这样实现：
border:10px solid rgba(0,0,0,0.1);
background:red;
然后在浏览器中运行，你会发现是这样的：
- 整个body的背景是纯白色；
- border的半透明是纯黑色，0.1透明；
- div宽度是100px,background是red;
其实我们想实现处理的效果可能是这样的：
怎么让border透明的后面是父级的元素的背景色，不是自身的背景色?
面试中可能会有面试官问你，background属性渲染的是盒模型的哪一部分，会渲染border吗？
解释上面问题的方案就是给div再加一个属性：background-clip,它是设置元素的背景是否延伸到边框下面的属性；默认值是border-box表示延伸到边框下面；另外还有padding-box表示延伸到内边距（此例子设置这个值），content-box表示剪切到内容区；text表示剪切到前景文本区
注：最终的例子可在这里查看。 本文是Lea Verou编写的《css secrets》47个css问题中的第一个。侵权可删！
