神奇的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 >

二、立方体

 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>
 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 =56
28 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 >
 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

以上是我搜集到关于滤镜的用法例子，欢迎大家留下更好的用法，^_^

转载于:https://www.cnblogs.com/lotuswlz/archive/2007/01/11/617683.html