CSS滤镜效果精粹
作者 佚名技术
来源 CSS编程
浏览
发布时间 2012-05-27
h=20); } .xrays { font-family:lucida handwirting italic; font-size:72px; font-style:bold; color:#336600; width:350px; filter:xray; } </style> </head> <body> <table width=1000 border=1> <tr><td width=100>滤镜属性</td><td width=100>描述</td><td width=400>参数和取值</td><td width=400>效果示例</td></tr> <tr><td><span class=alpha>Alpha</span></td><td>设置透明效果</td><td>opacity:透明度等级,0到100,0为完全透明<br> style:指定透明区域形状特征,0为均匀分布;1为线形;2为放射状;3为长方形<br>finishopacity:设置渐变结束时的透明度,达到渐变效果,值从0到100<br> startX,startY:渐变透明效果开始坐标<br>finishX,finishY:渐变透明效果结束坐标</td><td><p><img src="fd.jpg" class="alphas"/></p></td></tr> <tr><td>Blur</td><td>建立模糊效果</td><td>add:指定图片是否改变为模糊效果,true和false<br> direction:设置模糊方向,0度代表垂直向上,每45度为一个单位,默认向左270度<br>strength:代表多少个像素的宽度受到模糊影响,默认为5</td> <td><div class="blurs">GOOD LUCK !</div></td></tr> <tr><td>Chroma</td><td>把指定的颜色设置为透明</td><td>color:指定透明颜色</td><td>chroma<div class="chromas">示例</div></td></tr> <tr><td>DropShadow</td><td>建立一种偏移的影像轮廓,即投射阴影</td><td>color:投影的颜色<br>offx,offy:x,y方向阴影的偏移量<br> positive:true为任何非透明像素建立阴影,false为透明像素建立阴影</td><td><div class="dropshadows">dropshadow示例</div></td></tr> <tr><td>FlipH</td><td>水平反转</td><td>无</td><td><div class="fliphs">水平反转</div></td></tr> <tr><td>FlipV</td><td>垂直反转</td><td>无</td><td><div class="flipvs">垂直反转</div></td></tr> <tr><td>Glow</td><td>为对象的外边界增加光效</td><td>color:指定发光的颜色<br> strength:发光的强度</td><td><div class="glows">GLOW示例</div></td></tr> <tr><td>Gray</td><td>降低图片的彩色度,变成灰度图</td><td>无</td><td><img src="fd.jpg" class="grays"/></td></tr> <tr><td>Invert</td><td>将色彩、饱和度以及亮度值完全反转建立底片效果</td><td>无</td><td><img src="fd.jpg" class="inverts"/></td></tr> <tr><td>Light</td><td>在一个对象上进行灯光投影</td><td>no |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |
你可能对下面的文章感兴趣
关于CSS滤镜效果精粹的所有评论