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 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python正则捕获操作示例
2017/08/19 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python如何实现一个刷网页小程序
2018/11/27 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
同学聚会老师邀请函
2014/01/28 职场文书
公司授权委托书范本
2014/04/03 职场文书
学习雷锋标语
2014/06/25 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
黄山导游词
2015/01/31 职场文书
2015年大学生实习评语
2015/03/25 职场文书
开学第一周值周总结
2015/07/16 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
javascript对象3个属性特征
2021/11/17 Javascript
无线电知识基础入门篇
2022/02/18 无线电
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS