📄 0080.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>精通CSS滤镜之二</strong></big></p>
<div align="right">---（文/动力熊猫）</div>
<p>1、Alpha 滤镜<br>
</p>
<p> 语法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,<br>
starty=starty,finishx=finishx,finishy=finishy)}</p>
<p> "Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下：<br>
“opacity"代表透明度水准。默认的范围是从0
到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。”finishopacity"是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0
到 100。“style" 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y
的坐标。</p>
<p>效果如下：</p>
<table border="1" height="267" width="55">
<TBODY>
<tr>
<td height="1" width="0%"><img alt="正常图片" height="270" src="images/1.jpg" width="180"></td>
<td height="1" width="31%"><img alt="filter:alpha(opacity=50)" height="270" src="images/1.jpg"
style="FILTER: alpha(opacity=50)" width="180"></td>
<td height="1" width="32%"><img
alt="filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,finishx=250,finishy=285"
height="270" src="images/1.jpg"
style="FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,finishx=250,finishy=85"
width="180"></td>
<td height="1" width="9%"><img
alt="filter:alpha(opacity=0,finishopacity=80,style=1,startx=0,starty=5,finishx=250,finishy=285"
height="270" src="images/1.jpg"
style="FILTER: alpha(opacity=0,finishopacity=80,style=1,startx=0,starty=5,finishx=250,finishy=85"
width="180"></td>
</tr>
</TBODY>
</table>
<p> </p>
<p>2、Blur 滤镜</p>
<p>语法：对于HTML：{ilter:blur(add=add,direction=direction,strength=strength)}<br>
对于Script语言： [oblurfilter=] object.filters.blur<br>
用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur"就是产生同样的模糊效果。<br>
“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，她代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体，如果设置他的模糊”ADD=1“，那么这些字体的效果会非常好看的。如下：<br>
<font color="#000000">filter:blur(add=ture,direction=135,strength=10）</font></p>
<div><p><span style="FONT-FAMILY: 黑体; FONT-SIZE: 20pt">我向你飞，雨温柔地缀！</span></p>
</div><table border="1" width="100%">
<TBODY>
<tr>
<td width="25%"><img alt="正常图片" height="270" src="images/1.jpg" width="180"></td>
<td width="25%"><img alt="filter:blur(strength=10)" height="270" src="images/1.jpg"
style="FILTER: blur(strength=10)" width="180"></td>
<td width="25%"><img alt="filter:blur(strength=40)" height="270" src="images/1.jpg"
style="FILTER: blur(strength=40)" width="180"></td>
<td width="25%"><img alt="filter:blur(strength=70)" height="270" src="images/1.jpg"
style="FILTER: blur(strength=70)" width="180"></td>
</tr>
</TBODY>
</table>
<p>3、FlipH, FlipV 滤镜</p>
<p align="center"> 语法：{filter:filph} ,{filter:filpv}
分别是水平反转和垂直反转，具体如下：<br>
</p>
<table border="1" width="49%">
<TBODY>
<tr>
<td width="26%"><img alt="正常图片" height="270" src="images/1.jpg" width="180"></td>
<td width="74%"><img alt="水平反转 style="filter:fliph;"" height="270"
src="images/1.jpg" style="FILTER: fliph" width="180"></td>
</tr>
<tr>
<td width="26%"><img alt="垂直反转 style="filter:flipv;"" height="270"
src="images/1.jpg" style="FILTER: flipv" width="180"></td>
<td width="74%"><img
alt="先水平反转，然后垂直反转 style="filter:flip() flipv()""
height="270" src="images/1.jpg" style="FILTER: flip() flipv()" width="180"></td>
</tr>
</TBODY>
</table>
<p>4、Chroma 滤镜</p>
<p>语法：{filter:chroma(color=color)}<br>
使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma
滤镜过滤掉兰色，就成了下面的样子。<br>
<font color="#000000">filter:chroma(color=blue)</font></p>
<div><p class="d" style="COLOR: blue; FONT-SIZE: 48px; FONT-WEIGHT: bold"><strong>滴水檐茶坊</strong></p>
</div><p><br>
</p>
<p> </p>
<p>5、DropShadow 滤镜</p>
<p>语法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}</p>
<p>“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。"Color"代表投射阴影的颜色，"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。"Positive"参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果</p>
<table border="1" height="355" width="100%">
<TBODY>
<tr>
<td height="286" width="33%"><img alt="正常图片" height="270" src="images/1.jpg" width="180"></td>
<td class="drop" height="286" width="67%"><img
alt="dropshadow(color=gray,offx=5,offy=5.positive=0) 效果" height="270" src="images/1.jpg"
width="180"></td>
</tr>
<tr>
<td height="57" width="33%"> <big>正常文字</big></td>
<td class="drop" height="57" width="67%"><font color="#000000">
dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字</font></td>
</tr>
</TBODY>
</table>
<p>6、Glow 滤镜</p>
<p>语法：{filter:glow(color=color,strength)}<br>
当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。<br>
<font color="#000000">filter:glow(color=red,strength=10) 后的效果</font></p>
<div class="flame"><p><font face="黑体" size="7">滴水檐茶坊</font><font
face="黑体"> </font></p>
</div><p><font color="#000000">filter:glow(color=#ffff00,strength=5) 后的效果</font></p>
<div class="neon"><p><font face="黑体" size="7">滴水檐茶坊</font><font
face="黑体"> </font></p>
</div><div class="xl"><p><font face="黑体" size="6">好象可以把PhotoShop踹到一边了，是吗</font><font
face="黑体" size="7">？</font><font face="黑体"> <br>
<br>
<br>
<br>
<br>
</font><!-- #EndEditable --></p>
</div>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -