首页 > 网页教程 > CSS > CSS3实现透明边框的方法分享

CSS3实现透明边框的方法分享

时间:2013-01-06    来源:狼来了

我们在写项目的时候,经常性的会遇到弹出层的效果。UI的同学效果做的还挺漂亮的,类似截图如下

RGBA

就是半透明的边框。汗,前端的同事想到的方案是 做个10*10的png24的半透明图片,然后作为背景平铺(让外层盒子的内边距 = 弹出层边框的宽度)这样能模拟出透明边框的效果。但是万恶的IE6不支持PNG透明。。。。。抓狂!

今天找到一个比较优的解决方案,使用 RGBA.

先是说说 RGB, RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 – 255。百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值

RGBA语法:

 .div {background: rgba(0,0,0,0.5);} 

RGBA和opacity的区别

opacity (filter: Alpha(Opacity=50) 或opacity:0.5)会使整个元素包括子元素透明,而RGBA仅仅是元素本身透明,子元素不透明。

下面具体讲讲怎样让IE浏览器支持RGBA颜色。

IE下RGBA写法

.div {
   filter:progid:dximagetransform.microsoft.gradient
   (startcolorstr="#66000000", endcolorstr="#66000000",gradienttype=0);}
   
   /*ie9已经支持rgba模式了*/
 :root .div{filter:none;}

RGBA兼容列表

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA(startColorstr的前两位)是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。

RGBA颜色还可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,Firefox在border的拐角处会出现叠加,比如透明度是0.4,那么在Firefox中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

相关推荐
6个设计精致使用CSS3技术美化的表单教程
CSS3教程:创意独特漂亮的CSS动画导航菜单设计
20个基于CSS3制作的3D按钮教程分享(附DEMO演示)
25个超酷的CSS3动画按钮和菜单教程分享
CSS3新手入门教程:快乐的CSS3之旅!
8个CSS3前端开发必备的实用在线帮助手册
制作CSS3圆角效果的代码片段及图片演示
CSS3的Multi-columns多列布局之列数和列宽详解
CSS3的Multi-columns多列布局column-gap column-rule详解
CSS3的Multi-columns多列布局之跨列详解
初识CSS3的强大功能
如何用CSS3 border-radius来实现圆角DIV?
CSS1-CSS3选择器汇总表
微软的IE9将要支持CSS3和HTML5?
CSS3亮点前瞻之线性渐变实例详解
不同浏览器在CSS3和HTML5下的兼容速查表
CSS3属性box-shadow(图层阴影)的使用教程
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
让IE6/IE7/IE8支持CSS3属性的脚本
Smashing Magazine CSS3设计赛获奖作品赏析
前端设计必备的CSS3开发实用工具集
看这些用CSS3绘制的图标,你震撼了吗
利用CSS3技术嵌入Web字体格式及浏览器兼容性介绍
24款超级实用的免费CSS3在线工具宝典
HTML5和CSS3开发的功能检测类库 — Modernizr
CSS3教程:17种用CSS实现的很酷炫的立体网页按钮和字体效果
5款立体质感的CSS3导航菜单(附英文教程和下载)
用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮
关注一些鲜为人知、试验性的CSS属性
36款超级实用的CSS3在线生成器和工具推荐
7个基于CSS3的工具提示(tooltip)教程推荐
网页前端开发:微博CSS3适用细节初探

精彩推荐

热门教程