[css 揭秘]：CSS揭秘 技巧（一）：半透明边框

我的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