CSS3制作半透明边框(Facebox)类似渐变


Posted in HTML / CSS onDecember 09, 2012

CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框(Facebox),虽然现在不支持了,但是还是值得研究一下。
 CSS3制作半透明边框(Facebox)类似渐变 
你有可能觉得这样写就行了: 折叠展开CSS Code复制内容到剪贴板 

复制代码
代码如下:

#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }

 然而白色背景会一直扩散到边框上,变成如下的样子:
CSS3制作半透明边框(Facebox)类似渐变 还好我们有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 */ }
 
具体如下
CSS3制作半透明边框(Facebox)类似渐变 
如果我们把background-clip设置成padding-box,那border就不会被影响。
 CSS3制作半透明边框(Facebox)类似渐变  
}
相关内容: background-origin顺便介绍一下和background-clip概念类似的属性:background-origin,它的功能就是定义背景图片左上的坐标CSS3制作半透明边框(Facebox)类似渐变 例子如下: CSS3制作半透明边框(Facebox)类似渐变 
浏览器兼容:Works in: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9  
HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 #HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 #HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 #HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 #HTML / CSS
CSS3悬停效果案例应用
Nov 21 #HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 #HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 #HTML / CSS
You might like
PHP4中实现动态代理
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
js post提交调用方法
2014/02/12 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue的全局提示框组件实例代码
2018/02/26 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL