• 不断学习才有回报,学无止境!

各种滤镜的样式写法

DIV+CSS技巧发现 箭翎 2023次浏览 0个评论 扫描二维码

1:各种滤镜的样式,要使用滤镜的样式,须添加样式代码 style=” “1-1:Alpha 滤镜,具有透明层次效果。
代码形式 style=”filter: alpha(opacity=100,style=3)”注解 opacity 代表透明度水准,可选值从 0-100style 指定透明区域的样式,可选 0(代表统一形状),1(线性透明),2(放射状透明),3(方块状透明)1-2: Blur 滤镜,模糊效果
代码形式 style=”filter: blur(add=1,direction=30,strength=5)”add 属性是用来确定是否在运动模糊中使用原有目标,可选值 0(表示否,一般用来处理文字),1 (表示是,一般用来处理图片)。
direction 属性用来是设置模糊的方向,可选值 0-360,要是不指定的情况下,默认是270。
strength 属性,代表有多少像素受到模糊的影响。只能用整数来指定,不指定的请宽下默认值是 5。
1-3:Shadow 滤镜,阴影投射效果
代码形式:style=”filter: shadow(color=black,direction=180)”color 投射的阴影颜色属性。
direction 阴影投射的角度,可选 0-360。
1-4:DropShadow 滤镜,产生重叠效果。
代码形式:style=”filter: dropshadow(color=lightgreen,offX=5,offY=3,Positive=1)”color 重叠的颜色
offX 阴影投射的X轴位置
offY 阴影投射的Y轴位置
Positive 指定透明象素阴影,布尔型,0为是,1为否1-5:Wave 滤镜,正弦波变形
代码形式:style=”filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)”add 布尔型,0或1,0表示将原始对象加入最后效果中,1则反之lightstrength 对波纹增加光影效果,可选0-100strength 表示振幅的大小
freq 表示波纹的频率,在指定的对象上要产生多少个完整的波纹phrase 设置正弦波的偏移量,可选 0-100
1-6:Glow 滤镜,光晕效果
代码形式 style=”filter: glow(color=gray,strength=4)”color 光晕颜色
strength 光晕的厚度。
1-7: FlipV 滤镜, FlipH 滤镜
代码形式: style=”filter: FlipV”
Flip滤滤镜主要是产生变换效果,即上下变换和左右变换。
FlipV产生上下变换,
FlipH产生左右变换
1-8:gray 黑白滤镜,(多用于图片的转换。黑白效果)代码形式 style=”filter: gray”
1-9: invert 反色滤镜,(多用于图片)
代码形式: style=”filter: invert”
1-10:Xray 滤镜,使对象变得像被 x光照射一样,(多用于图片)代码形式: style=”filter:Xray”
1-11: Chroma 滤镜,可以设置一个对象中指定的颜色为透明色代码形式:style=”filter:chroma(color=#000000)”2-1: alpha滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: alpha(opacity=100,style=2); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>
</FONT></P>
2-2: Blur滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: blur(add=1,direction=30,strength=5); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
Blur滤镜文字的使用
</FONT></P>
2-3: shadow滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: shadow(color=black,direction=180); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
shadow滤镜文字的使用</FONT></P>
2-4: dropshadow滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: dropshadow(color=lightgreen,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
dropshadow滤镜文字的使用
</FONT></P>
2-5: wave滤镜的使用在文字上的应用。(第二个添加了倒影的滤镜)<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
wave滤镜文字的使用
</FONT></P>
<P align=center>
<FONT style=”FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 方正舒体”>wave滤镜文字的使用</FONT>
<FONT style=”FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30) flipv; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
wave滤镜文字的使用
</FONT></P>
2-6: glow滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; filter: glow(color=gray,strength=4); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
glow滤镜文字的使用<br>glow滤镜文字的使用<br>
</FONT></P>
2-7: FlipV滤镜的使用在文字上的应用。
<P align=center>
<FONT style=”FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; FONT-FAMILY: 方正舒体”>
FlipV滤镜文字的使用
<FONT style=”FONT-SIZE: 30pt; filter: FlipV; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体”>
FlipV滤镜文字的使用
</FONT></FONT><br>
</P>
2-8: chroma滤镜的使用在文字上的应用。
<TABLE align=center cellpadding=0 cellspacing=0 background=http://blog.21121.net/wp-content/themes/Record/images/random/tb13.jpg>
<TBODY>
<TR>
<TD style=”FILTER: chroma(color=#336699″>
<TABLE align=center bgcolor=#000000>
<TBODY>
<TR>
<TD align=middle>
<FONT style=”FONT-SIZE: 40pt” face=黑体 color=#336699><b>网页课堂,chroma滤镜的使用</b></FONT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明各种滤镜的样式写法
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址