1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 #box{
6 width:300px;
7 height:200px;
8 border:dashed 1px green;
9 line-height:30px;
10 letter-spacing:5px;
11 word-spacing:12px;
12 overflow:scroll;/*auto scroll visible(默认) hidden*/
13 layout-flow:vertical-ideographic;
14 }
15 .spanone{
16 color:green;
17 border:solid 1px red;
18 text-indent:20px;
19 }
20 #img0{
21 filter:blur(add=true,direction=45,strength=15);
22 }
23 #img1{
24 filter:blur(add=false,direction=45,strength=15);
25 }
26 #img2{
27 filter:blur(add=true,direction=90,strength=15);
28 }
29 a.links:hover{
30 color:green;
31 }
32 a.links:active{
33 color:orange;
34 }
35 a.links:visited{
36 color:#aaaaaa;
37 }
38 a.links:link{
39 color:rgb(255,40,255);
40 }
41 </style>
42 </head>
43 <body>
44 <div id='box'>
45 <span class='spanone'>您好 世界 hello world hello world hello world hello world</span><br/><br/>
46 <span class='spanone'>hello world</span><br/><br/>
47 <span class='spanone'>hello world</span><br/><br/>
48 <span class='spanone'>hello world</span><br/><br/>
49 <span class='spanone'>hello world</span>
50 </div><br/>
51 <img src='img.jpg' title='森林' id='img0'/><br/>
52 <img src='img.jpg' title='森林' id='img1'/><br/>
53 <img src='img1.jpg' title='森林' id='img2' alt='森林'/>
54 <script language='javascript'>
55 var object=document.getElementById('img0');
56 var x=60;
57 function fun(){
58 object.style.filter="blur(add=true,direction="+x+",strength=15)";
59 if(x==360){
60 clearTimeout(out);
61 }else
62 x+=15;
63 }
64 var out=window.setInterval("fun();",100);
65 </script>
66 <a href='thename.html' class='links'>links</a>
67 </body>
68 </html>
