CSS3制作半透明边框(Facebox)类似渐变
程序员文章站
2023-11-28 13:28:22
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框(Facebox),虽然现在不支持了,但是还是值得研究一下,接下来将详细介绍,需要的朋友可以参考下... 12-12-09...
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; /* firefox 3.6 */ -webkit-background-clip: border; /* safari 4? chrome 6? */
background-clip: border-box; /* firefox 4, safari 5, opera 10, ie 9 */ -moz-background-clip: padding; /* firefox 3.6 */
-webkit-background-clip: padding; /* safari 4? chrome 6? */ background-clip: padding-box; /* firefox 4, safari 5, opera 10, ie 9 */
-moz-background-clip: content; /* firefox 3.6 */ -webkit-background-clip: content; /* safari 4? chrome 6? */
background-clip: content-box; /* firefox 4, safari 5, opera 10, ie 9 */ }
具体如下:
如果我们把background-clip设置成padding-box,那border就不会被影响。
}
相关内容: background-origin顺便介绍一下和background-clip概念类似的属性:background-origin,它的功能就是定义背景图片左上的坐标 例子如下:
浏览器兼容:works in: safari 5, chrome 7, firefox 3.6+, opera 10, ie 9
你有可能觉得这样写就行了: 折叠展开css code复制内容到剪贴板
复制代码
代码如下:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }
然而白色背景会一直扩散到边框上,变成如下的样子:
还好我们有css3的background-clip属性 css code复制内容到剪贴板
复制代码
代码如下:#lightbox { -moz-background-clip: border; /* firefox 3.6 */ -webkit-background-clip: border; /* safari 4? chrome 6? */
background-clip: border-box; /* firefox 4, safari 5, opera 10, ie 9 */ -moz-background-clip: padding; /* firefox 3.6 */
-webkit-background-clip: padding; /* safari 4? chrome 6? */ background-clip: padding-box; /* firefox 4, safari 5, opera 10, ie 9 */
-moz-background-clip: content; /* firefox 3.6 */ -webkit-background-clip: content; /* safari 4? chrome 6? */
background-clip: content-box; /* firefox 4, safari 5, opera 10, ie 9 */ }
具体如下:
如果我们把background-clip设置成padding-box,那border就不会被影响。
}
相关内容: background-origin顺便介绍一下和background-clip概念类似的属性:background-origin,它的功能就是定义背景图片左上的坐标 例子如下:
浏览器兼容:works in: safari 5, chrome 7, firefox 3.6+, opera 10, ie 9
上一篇: CSS3毛玻璃效果(blur)有白边问题的解决方法
下一篇: CSS3点击按钮实现背景渐变动画效果