神奇的CSS样式
一,梯度渐变
1 <html>
2 <body>
3 <style>
4 .rec{
5 border:1px solid #002D96 ;
6 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#9DBCEA, EndColorStr=#ffffff);
7
8 }
9 </style>
10
11 <div class="rec" style="width:30px;height:300px;">
12 </div>
13 </body>
14 </html>
2 <body>
3 <style>
4 .rec{
5 border:1px solid #002D96 ;
6 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#9DBCEA, EndColorStr=#ffffff);
7
8 }
9 </style>
10
11 <div class="rec" style="width:30px;height:300px;">
12 </div>
13 </body>
14 </html>
二、立方体
1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<link rel="File-List" href="new_page_1.files/filelist.xml">
6<title>新建网页 1</title>
7<!--[if !mso]>
8<style>
9v\:* { behavior: url(#default#VML) }
10o\:* { behavior: url(#default#VML) }
11.shape { behavior: url(#default#VML) }
12</style>
13<![endif]--><!--[if gte mso 9]>
14<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
15</xml><![endif]-->
16</head>
17
18<body>
19
20<p><!--[if gte vml 1]><v:rect id="_x0000_s1025"
21 style='position:absolute;left:129pt;top:80.25pt;width:26.25pt;height:209.25pt;
22 z-index:1'>
23 <o:extrusion v:ext="view" on="t" rotationangle="-25,25" viewpoint="0,0"
24 viewpointorigin="0,0" skewangle="0" skewamt="0" lightposition=",50000"
25 type="perspective"/>
26</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
27absolute;z-index:1;left:171px;top:96px;width:56px;height:275px'><img width=56
28height=275 src="new_page_16.files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]></p>
29
30</body>
31
32</html>
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<link rel="File-List" href="new_page_1.files/filelist.xml">
6<title>新建网页 1</title>
7<!--[if !mso]>
8<style>
9v\:* { behavior: url(#default#VML) }
10o\:* { behavior: url(#default#VML) }
11.shape { behavior: url(#default#VML) }
12</style>
13<![endif]--><!--[if gte mso 9]>
14<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
15</xml><![endif]-->
16</head>
17
18<body>
19
20<p><!--[if gte vml 1]><v:rect id="_x0000_s1025"
21 style='position:absolute;left:129pt;top:80.25pt;width:26.25pt;height:209.25pt;
22 z-index:1'>
23 <o:extrusion v:ext="view" on="t" rotationangle="-25,25" viewpoint="0,0"
24 viewpointorigin="0,0" skewangle="0" skewamt="0" lightposition=",50000"
25 type="perspective"/>
26</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
27absolute;z-index:1;left:171px;top:96px;width:56px;height:275px'><img width=56
28height=275 src="new_page_16.files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]></p>
29
30</body>
31
32</html>
三,圆柱形
1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<link rel="File-List" href="new_page_1.files/filelist.xml">
6<title>新建网页 1</title>
7<style>
8v\:* { behavior: url(#default#VML) }
9o\:* { behavior: url(#default#VML) }
10.shape { behavior: url(#default#VML) }
11</style>
12<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
13</xml>
14</head>
15
16<body>
17
18<v:oval style='position:absolute;left:84pt;top:43.5pt;width:26.25pt;height:26.25pt; z-index:1' fillcolor="#ff9">
19 <o:extrusion v:ext="view" backdepth="4in" on="t" rotationangle="80"
20 viewpoint="0,0" viewpointorigin="0,0" skewangle="0" skewamt="0"
21 lightposition=",-10000"/>
22</v:oval>
23
24</body>
25
26</html>
27
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<link rel="File-List" href="new_page_1.files/filelist.xml">
6<title>新建网页 1</title>
7<style>
8v\:* { behavior: url(#default#VML) }
9o\:* { behavior: url(#default#VML) }
10.shape { behavior: url(#default#VML) }
11</style>
12<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
13</xml>
14</head>
15
16<body>
17
18<v:oval style='position:absolute;left:84pt;top:43.5pt;width:26.25pt;height:26.25pt; z-index:1' fillcolor="#ff9">
19 <o:extrusion v:ext="view" backdepth="4in" on="t" rotationangle="80"
20 viewpoint="0,0" viewpointorigin="0,0" skewangle="0" skewamt="0"
21 lightposition=",-10000"/>
22</v:oval>
23
24</body>
25
26</html>
27
以上是我搜集到关于滤镜的用法例子,欢迎大家留下更好的用法,^_^