border透明
2015-08-17 15:04
281 查看
最近在写一表项目,需要边框透明,起初我以为没有办法实现,最近看一本书中找到办法,就是通过rgba实现,代码如下:
border: 1px solid rgba(0, 0, 0, 0.7);
关于rgba与opacity的区别我就不再赘述,下面简单叙述border的这种用法如果兼容,简单的实现如下,
div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ }
可是有些IE8、IE7、IE6不支持rgba,所以在这些浏览器下连border都不会显示。解决办法是对于不支持rgba的浏览器写一条border,通过对R/G/B各个色值的调整,来达到和rgba差不多的效果。对于支持rgba的浏览器另写一条border。
注:background-clip,规定背景的显示区域,=padding-box表示背景被裁剪到内边距框。
这个属性是为了在背景不透明时,透明的border依然能正常显示。
div { border: 1px solid rgb(255, 127, 127); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ }
再多说几句,色值计算:假设我们要的透明度为a,在不支持rgba的浏览器中色值是多少呢?
这个色值是和背景色有关的。假设背景色为(bR, bG, bB),我们要显示的颜色是(fR, fG, fB),要显示颜色的透明度是a。
那么真正的色值是:( bR * (1-a), bG * (1-a), bB * (1-a) ) + ( fR * a, fG * a, fB *a )
例:如果背景色为黑色(0, 0, 0),那么新的色值为:(fR * a, fG * a, fB * a)。
(255, 0, 0, .5) = (127, 0, 0)
如果背景色为白色(255, 255, 255),那么新的色值为(255 * (1-a), 255 * (1-a), 255 * (1-a)) + ( fR * a, fG * a, fB *a )。
(255, 255, 255) + (255, 0, 0, .5) = (255, 127, 127)
相关文章推荐
- C语言 枚举 enum
- 浅析电子政务工程建设项目的建章立制
- 安智armeabi 和 armeabi-v7a 的库文件增加法则
- 棋盘问题(POJ--1321
- iOS编程——Swift语法之 "?" 和 "!"
- [转]cocos2dx中用外部浏览器打开url
- 设计管理员表;webservice用于网络安全的高端内提供服务的
- mongodb与SQL对应关系表
- MetaQ技术内幕——源码分析 (地址)
- java中计算两个时间差
- SQL学习笔记
- yii2如何引入自定义css或js文件
- Cocos2d-x能够实现的效果总结
- lightoj 1304 The Best Contest Site Ever (二分匹配)
- 九度oj 1073
- UVA_10651_PebbleSolitaire
- 黑马程序员--java基础--网络编程TCP传输
- 首次涉水Maven+Jersey,入门笔记
- Unity3d的单例及场景间的数据传递
- OC继承的工作机制。