CSS 滤镜的应用
一、CSS滤镜的应用:Glow
CSS滤镜的应用:Glow
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#00ff00,Strength=10); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FLOAT: left; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic06.gif"><SPAN style="FILTER: progid:DXImageTransform.Microsoft.Glow(); HEIGHT: 60px">CSS滤镜的应用:Glow</SPAN></DIV>
语法:
filter : progid:DXImageTransform.Microsoft.Glow ( enabled=
bEnabled
, color=
sColor
, strength=
iDistance
)
属性:
特性:
说明:
环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外
二、CSS滤镜的应用:Engrave
CSS滤镜的应用:Engrave
说明:
用灰度值为对象内容制作浮雕纹理效果。
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Engrave(); PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic02.gif">CSS滤镜的应用:Engrave</DIV> 三、CSS滤镜的应用:Emboss
CSS滤镜的应用:Emboss
说明:
用灰度值为对象内容制作浮雕纹理效果
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Emboss(); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic10.jpg">CSS滤镜的应用:Emboss</DIV> 四、CSS滤镜的应用:DropShadow
CSS滤镜的应用:DropShadow
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.DropShadow(color=#ff00ff00,offX=-5); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ff6633"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic07.gif">CSS滤镜的应用:DropShadow</DIV>
CSS滤镜的应用:DropShadow
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.DropShadow(); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic07.gif">CSS滤镜的应用:DropShadow</DIV>
CSS滤镜的应用:DropShadow
代码:<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.DropShadow(color=#ffff00ff,offy=-10); LEFT: 9px; PADDING-BOTTOM: 6px; WIDTH: 80%; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ffd700"><IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" src="http://myroom.blogdriver.com/myroom/pic/mypic07.gif">CSS滤镜的应用:DropShadow</DIV>
五、CSS滤镜的使用:Chroma
请从下方选择滤镜参数的值。
效果图:
请从下方选择滤镜参数的值。
<DIV style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FILTER: progid:DXImageTransform.Microsoft.Chroma(color=#00000000); PADDING-BOTTOM: 6px; WIDTH: 80%; COLOR: #ffffff; PADDING-TOP: 6px; HEIGHT: 80px; BACKGROUND-COLOR: #ff6633"><IMG src="http://myroom.blogdriver.com/myroom/pic/bj.gif">请从下方选择滤镜参数的值。</DIV>
六、CSS样式滤镜的应用:Blur
|