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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 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中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php验证手机号码
2015/11/11 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
班级学习计划书
2014/04/27 职场文书
个人授权委托书格式
2014/08/30 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
班主任经验交流材料
2014/12/16 职场文书
银行员工考核评语
2014/12/31 职场文书
杨善洲电影观后感
2015/06/04 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android