今天小编跟大家讲解下有关CSS3制作半透明边框(Facebox)类似渐变 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3制作半透明边框(Facebox)类似渐变 的相关资料，希望小伙伴们看了有所帮助。
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框（Facebox） 虽然现在不支持了 但是还是值得研究一下。你有可能觉得这样写就行了：折叠展开CSS Code复制内容到剪贴板复制代码代码如下:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); } 然而白色背景会一直扩散到边框上 变成如下的样子：还好我们有CSS3的background-clip属性CSS Code复制内容到剪贴板复制代码代码如下: #lightbox { -moz-background-clip: border; -webkit-background-clip: border; background-clip: border-box; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -moz-background-clip: content; -webkit-background-clip: content; background-clip: content-box; } 具体如下：如果我们把background-clip设置成padding-box,那border就不会被影响。}相关内容： background-origin顺便介绍一下和background-clip概念类似的属性：background-origin 它的功能就是定义背景图片左上的坐标例子如下：浏览器兼容：Works in: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9来源：爱蒂网
