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

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

就是半透明的边框。汗，前端的同事想到的方案是做个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);}

:root .div{filter:none;}

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浏览器不会出现这种情况。

css加透明边框,CSS3实现透明边框的方法分享相关推荐

css3倒圆角边框,css3实现圆角边框渐变
原标题:css3实现圆角边框渐变渐变的形式:可选参数有两种方式- 1.设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换. 2.使用关键字,left代表从左到右,top ...
css立方体效果,纯CSS3实现透明3D立方体旋转效果
一个立方体有六个面.所以,它的HTML结构应该是这样的(这里用Vue.js来实现): 拍岸的布落格为了便于理解,我们给每个面一个单独的class,好作区分,你也可以用cube__item: ...
HTML失败怎么解决,CSS加载失败怎么处理？
当我们在浏览网页时,偶尔会看见网站样式加载不出来.对于前端初学者来说,可能也会出现css样式不能正常调用或显示.CSS加载失败怎么处理?下面给大家分析一下. css加载失败可能有多种原因导致,下面我们 ...
css 透明背景_css 中多种边框的实现小窍门
一.多重边框[1] 背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是 ...
html5加内边框,css3怎么加内边框
css3加内边框的方法:可以通过使用border属性和box-sizing属性来加内边框,如[box-sizing:border-box;].box-sizing属性允许以某种方式定义某些属性,以适应 ...
css矩形外发光,CSS3 实现发光边框特效
运行效果: html css body { margin: 0; width: 100vw; height: 100vh; background: #010326; } .root { --glow_ ...
css透明到渐变,css渐变(css3背景透明渐变)
竖向使这个div的颜色渐变,从red开始渐变到白色,请问怎么写css代码?最好. CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可 ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...

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

css加透明边框,CSS3实现透明边框的方法分享相关推荐

最新文章

热门文章