> CSS3实现透明边框的方法分享
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写法
filter:progid:dximagetransform.microsoft.gradient
(startcolorstr=&#&, endcolorstr=&#&,gradienttype=0);}
/*ie9已经支持rgba模式了*/
:root .div{filter:}
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浏览器不会出现这种情况。IE中怎样用css设置图片半透明呢？
- 让建站技术学习更简单
IE中怎样用css设置图片半透明呢？
css中有可以让图片透明或者半透明的属性没啊？如果有，IE下应该怎么写呢？其它浏览器下又怎样写呢？请大侠赐教，谢谢了~
/*兼容的透明层样式*/ .transparent40 { filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4; } .transparent30 { filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3; } 兼容所有浏览器
其他回答 (5)
css中有可以让图片透明或者半透明的属性没啊？如果有，IE下应该怎么写呢？其它浏览器下又怎样写呢？请大侠赐教，谢谢了~
用滤镜 IE下是filter
可以通过滤镜来实现，只有IE内核才支持滤镜属性
在CSS中可以用filter属性来设置图片的透明值，IE中用filter的alpha属性值来设置。示例代码如下：img{filter:alpha(opacity=50)}其它标准浏览器下，则直接设置opacity属性即可实现。示例代码如下：img{opacity:0.5}更多IE下关于filter特效的示例，可参考如下网页：《[分享]IE所支持的CSS滤镜(filter)效果》
相关知识等待您来回答
该问题来自：建站技术学习论坛，
从学习计划开始入手，
让你学的更轻松。网页制作领域专家随笔记录(css的style让控件透明,iframe背景透明,两div底部对齐)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
随笔记录(css的style让控件透明,iframe背景透明,两div底部对齐)
c​s​s​的​s​t​y​l​e​让​控​件​透​明​,​i​f​r​a​m​e​背​景​透​明​,​两​d​i​v​底​部​对​齐
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：3.94KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢设置DIV背景颜色透明度
阅读：15150次&&&时间： 13:47:30&&
本节向大家爱描述一下如何设置DIV背景颜色透明度，opacityOpacity设置或检索透明渐变的开始透明度，Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。
设置DIV背景颜色透明度
通常我们通过DIV的style样式属性filter来设置DIV背景透明样式。可根据alpha提供的如下参数进行组合控制：
filter:Alpha(enabled=bEnabled,style=iStyle, &opacity=iOpacity,finishOpacity=iFinishOpacity, &startX=iPercent,startY=iPercent, &finishX=iPercent,finishY=iPercent); &&
各参数含义如下：
enabledEnabled设置或检索滤镜是否激活。
styleStyle设置或检索DIV背景透明渐变的样式。
opacityOpacity设置或检索透明渐变的开始透明度。
finishOpacityFinishOpacity设置或检索DIV背景透明渐变的结束透明度。
startXStartX设置或检索DIV背景透明渐变开始点的水平坐标。
startYStartY设置或检索DIV背景透明渐变开始点的垂直坐标。
finishXFinishX设置或检索DIV背景透明渐变结束点的水平坐标。
finishYFinishY设置或检索DIV背景透明渐变结束点的垂直坐标。
　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
实现上面这种效果的代码如下：
&&alpha&//*定义CSS样式*// &&!-- &DIV{position：absolute；left：50；top：70；width：150；} &//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*// &img{position：absolute；top：20；left：40； &filter：alpha(opacity=80)} &//*定义图片的样式，绝对定位，滤镜属性是透明度为80*// &--&&&&&pstyle=&font-size：48；font-weight：bold；color：red；&&Beautiful//*定义字体属性，前景色为红色*// &&imgsrc=&ss01076.jpg&&//*导入一张图片*// &&&
如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：
img{position：absolute；top：20；left：40； &filter：alpha(opacity=0,finishopacity=100, &style=1,startx=0,starty=85,finishx=150,finishy=85);} &　//*设置DIV背景透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为　线形*// &&
这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。
&&&&&&&&&& &&&&
&　Style=1& 　Style=2Style=3
以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
Copyright &
All Rights Reserved如果您关闭了浏览器的JavaScript，会导致页面部分功能无法显示，请开启JavaScript以便正常浏览本网页。网页代码站()谢谢您的支持！
||||||||||||||【】
代码排行榜
网页特效代码RSS
|||||||||||
问答排行榜
共有问题数：128425
共有回答数：141
已解决问题：33
待解决问题：128392
帖子排行榜
美文排行榜
站长实用工具
生活实用工具
网页代码站意见/反馈/留言/广告/程序定制 唯一客服邮箱： [#替换成@]
郑重声明：未经授权禁止转载、摘编、复制或建立镜像。如有违反，追究法律责任。
Copyright & 2009-
Corporation, All Rights Reserved
法律顾问：邵卉芳律师 技术支持：