我的github地址：https://github.com/FannieGirl/ifannie/
源码都在上面哦
喜欢的给我一个星吧
半透明边框
css 中的半透明颜色，比如用 rgba() 和 hsla()
但是在其他的属性中（比如边框）中使用半透明颜色并没有想象中那么容易哦！
假设我们想给一个容器设置一层白色的背景和一道半透明白色边框，boby的背景会从它的半透明边框透上来。
如果你单纯地这样写 是到达不到理想效果的
不信（你可以试试）
边框跑哪里去了？如果使用半透明颜色都不能实现半透明边框，那我们还有什么办法呢？网上我们看到太多已经实现的效果了。
解决： background-clip
知识背景：background-clip 属性规定背景的绘制区域。### 默认值是 border-box;
语法： background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
浏览器支持：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
这个属性的初始值是 border-box ,意味着背景会被元素的border-box（边框的外沿框）裁切掉，所以我们单纯的写法 看不到半透明边框的效果，我们要做的是把它的值设为 ### padding-box （内边距的外沿） 这样浏览器就会用内边距的外沿来把背景裁掉
完整代码：
效果图：
一脸认真，不知道效果 图有木有出来。。。
具体的代码可以看我提供的演示的地址
实例演示地址：https://jsfiddle.net/Fannie/06sjmL6n/
如果还是不太理解的，我把三个属性都实现一遍了，果然一目了然 （没有对比就没有伤害 啊哈哈）额无图无真相啊！
效果图：
参考链接：https://jsfiddle.net/Fannie/06sjmL6n/4/
后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp