神奇的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>
<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>9
v\:* { behavior: url(#default#VML) }10
o\:* { 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:27
absolute;z-index:1;left:171px;top:96px;width:56px;height:275px'><img width=5628
height=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>
8
v\:* { 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
<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>
8
v\:* { behavior: url(#default#VML) }
v\:* 9
o\:* { 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
以上是我搜集到关于滤镜的用法例子，欢迎大家留下更好的用法，^_^
浙公网安备 33010602011771号