1
/* filter:Microsoft format gradientType:1:up down;2:left right*/
2
.jianbian
3{
4
filter:progid:DXImageTransform.Microsoft.Gradient
5(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
6
}
7
8.gradient
9{
10 FILTER:Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);
11 BACKGROUND: skyblue；
12}
强人用js写的渐变控制：（个人没有验证过是否有用）/* filter:Microsoft format gradientType:1:up down;2:left right*/
2
.jianbian3
{
}4
filter:progid:DXImageTransform.Microsoft.Gradient 5
(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');6
}7
8
.gradient9
{10
FILTER:Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);11
BACKGROUND: skyblue；12
} 1背景一:
2<SCRIPT LANGUAGE="JavaScript">
3var Color= new Array(9);
4Color[1] = "ff";
5Color[2] = "ee";
6Color[3] = "dd";
7Color[4] = "cc";
8Color[5] = "bb";
9Color[6] = "aa";
10Color[7] = "99";
11Color[8] = "88";
12Color[9] = "77";
13Color[10] = "66";
14Color[11] = "55";
15Color[12] = "44";
16Color[13] = "33";
17Color[14] = "22";
18Color[15] = "11";
19Color[16] = "00";
20function fadeIn(where) {
21
if (where >= 1) {
22document.bgColor="#" + Color[where] +"0000";
23where -= 1;
24setTimeout("fadeIn("+where+")", 15);
25} else {
26setTimeout('fadeOut(1)', 15);
27
}
28}
29function fadeOut(where) {
30if (where <=16) {
31document.bgColor="#" + Color[where] +"0000";
32where += 1;
33setTimeout("fadeOut("+where+")", 15)
34} else {
35setTimeout("fadeIn(16)", 15);
36}
37}
38</SCRIPT>
39
40<body onLoad="fadeIn(16)">
41
42
43
44
45
46背景二:
47<!-- Begin
48var Clrs = new Array(9);
49Clrs[0] = 'ff0000';
50Clrs[1] = '00ff00';
51Clrs[2] = '000aff';
52Clrs[3] = 'ff00ff';
53Clrs[4] = 'ffa500';
54Clrs[5] = 'ffff00';
55Clrs[6] = '00ff00';
56Clrs[7] = 'ffffff';
57Clrs[8] = 'fffff0';
58var sClrs = new Array(5);
59sClrs[0] = 'ffa500';
60sClrs[1] = '55ff66';
61sClrs[2] = 'AC9DFC';
62sClrs[3] = 'fff000';
63sClrs[4] = 'fffff0';
64var yBase;
65var xBase;
66var step;
67var currStep = 0;
68var Xpos = 1;
69var Ypos = 1;
70var initialStarColor = 'ffa000';
71var Mtop = 250;
72var Mleft = 250;
73function Fireworks() {
74if (document.all) {
75yBase = window.document.body.offsetHeight / 3;
76xBase = window.document.body.offsetWidth / 8;
77}
78else if (document.layers) {
79yBase = window.innerHeight / 3;
80xBase = window.innerWidth / 8;
81}
82if (document.all) {
83step = 5;
84for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
85for (ai = 0; ai < Clrs.length; ai++) {
86var c = Math.round(Math.random()*[ai]);
87}
88if (currStep < 90)
89starsDiv.all[i].style.background=initialStarColor;
90if (currStep > 90)
91starsDiv.all[i].style.background=Clrs[c];
92starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
93starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
94}
95}
96else if (document.layers) {
97step = 5;
98for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers!
99var templayer = "a"+j;
100for (ai = 0; ai < Clrs.length; ai++) {
101var c = Math.round(Math.random()*[ai]);
102}
103if (currStep < 90)
104document.layers[templayer].bgColor=initialStarColor;
105if (currStep > 90)
106document.layers[templayer].bgColor=Clrs[c];
107document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
108document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
109}
110}
111currStep+= step;
112T=setTimeout("Fireworks()",5);
113if (currStep == 220) {
114currStep = -10;
115for (n = 0; n < sClrs.length; n++) {
116var k = Math.round(Math.random()*n);
117}
118initialStarColor = sClrs[k];
119if (document.all) {
120Dtop = window.document.body.clientHeight - 250;
121Dleft = xBase * 3.5;
122Mtop = Math.round(Math.random()*Dtop);
123Mleft = Math.round(Math.random()*Dleft);
124document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
125document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
126}
127else if (document.layers) {
128Dleft = window.innerWidth - 100;
129Dtop = window.innerHeight - 100;
130Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
131Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
132document.layers[templayer].top = Mtop;
133document.layers[templayer].left = Mleft;
134}
135if ((Mtop < 20) || (Mleft < 20)) {
136Mtop += 90;
137Mleft += 90;
138}
139}
140}
141Fireworks();
142// End -->
143</script>
背景一: 2
<SCRIPT LANGUAGE="JavaScript"> 3
var Color= new Array(9); 4
Color[1] = "ff"; 5
Color[2] = "ee"; 6
Color[3] = "dd"; 7
Color[4] = "cc"; 8
Color[5] = "bb"; 9
Color[6] = "aa"; 10
Color[7] = "99"; 11
Color[8] = "88"; 12
Color[9] = "77"; 13
Color[10] = "66"; 14
Color[11] = "55"; 15
Color[12] = "44"; 16
Color[13] = "33"; 17
Color[14] = "22"; 18
Color[15] = "11"; 19
Color[16] = "00"; 20
function fadeIn(where) { 21
if (where >= 1) { 
22
document.bgColor="#" + Color[where] +"0000"; 23
where -= 1; 24
setTimeout("fadeIn("+where+")", 15); 25
} else { 26
setTimeout('fadeOut(1)', 15); 27
} 28
} 29
function fadeOut(where) { 30
if (where <=16) { 31
document.bgColor="#" + Color[where] +"0000"; 32
where += 1; 33
setTimeout("fadeOut("+where+")", 15) 34
} else { 35
setTimeout("fadeIn(16)", 15); 36
} 37
} 38
</SCRIPT> 39
40
<body onLoad="fadeIn(16)"> 41
42
43
44
45
46
背景二: 47
<!-- Begin 48
var Clrs = new Array(9); 49
Clrs[0] = 'ff0000'; 50
Clrs[1] = '00ff00'; 51
Clrs[2] = '000aff'; 52
Clrs[3] = 'ff00ff'; 53
Clrs[4] = 'ffa500'; 54
Clrs[5] = 'ffff00'; 55
Clrs[6] = '00ff00'; 56
Clrs[7] = 'ffffff'; 57
Clrs[8] = 'fffff0'; 58
var sClrs = new Array(5); 59
sClrs[0] = 'ffa500'; 60
sClrs[1] = '55ff66'; 61
sClrs[2] = 'AC9DFC'; 62
sClrs[3] = 'fff000'; 63
sClrs[4] = 'fffff0'; 64
var yBase; 65
var xBase; 66
var step; 67
var currStep = 0; 68
var Xpos = 1; 69
var Ypos = 1; 70
var initialStarColor = 'ffa000'; 71
var Mtop = 250; 72
var Mleft = 250; 73
function Fireworks() { 74
if (document.all) { 75
yBase = window.document.body.offsetHeight / 3; 76
xBase = window.document.body.offsetWidth / 8; 77
} 78
else if (document.layers) { 79
yBase = window.innerHeight / 3; 80
xBase = window.innerWidth / 8; 81
} 82
if (document.all) { 83
step = 5; 84
for ( i = 0 ; i < starsDiv.all.length ; i++ ) { 85
for (ai = 0; ai < Clrs.length; ai++) { 86
var c = Math.round(Math.random()*[ai]); 87
} 88
if (currStep < 90) 89
starsDiv.all[i].style.background=initialStarColor; 90
if (currStep > 90) 91
starsDiv.all[i].style.background=Clrs[c]; 92
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100) 93
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100) 94
} 95
} 96
else if (document.layers) { 97
step = 5; 98
for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers! 99
var templayer = "a"+j; 100
for (ai = 0; ai < Clrs.length; ai++) { 101
var c = Math.round(Math.random()*[ai]); 102
} 103
if (currStep < 90) 104
document.layers[templayer].bgColor=initialStarColor; 105
if (currStep > 90) 106
document.layers[templayer].bgColor=Clrs[c]; 107
document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100) 108
document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100) 109
} 110
} 111
currStep+= step; 112
T=setTimeout("Fireworks()",5); 113
if (currStep == 220) { 114
currStep = -10; 115
for (n = 0; n < sClrs.length; n++) { 116
var k = Math.round(Math.random()*n); 117
} 118
initialStarColor = sClrs[k]; 119
if (document.all) { 120
Dtop = window.document.body.clientHeight - 250; 121
Dleft = xBase * 3.5; 122
Mtop = Math.round(Math.random()*Dtop); 123
Mleft = Math.round(Math.random()*Dleft); 124
document.all.starsDiv.style.top = Mtop+document.body.scrollTop; 125
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft; 126
} 127
else if (document.layers) { 128
Dleft = window.innerWidth - 100; 129
Dtop = window.innerHeight - 100; 130
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset); 131
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset); 132
document.layers[templayer].top = Mtop; 133
document.layers[templayer].left = Mleft; 134
} 135
if ((Mtop < 20) || (Mleft < 20)) { 136
Mtop += 90; 137
Mleft += 90; 138
} 139
} 140
} 141
Fireworks(); 142
// End --> 143
</script>精通 CSS 滤镜（一）
CSS（Cascading Style Sheets) 中文翻译为 层叠样式表单，简称样式单。它是近几年才发展起来的新技术，1998年5月12日，Cascading Style Sheets,level 2 成为了W3C 的新标准。同时,”W3C CoreStyles "和CSS2 Validation Service" 以及“CSS Test Suite" 宣布成立。它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志（TAG）里，也可以在外部附加文档作为外加文档。此时，一个样式表单可以作用于多个页面---甚至整个站点，因此具有更好的易用性和扩展性。我个人认为CSS好比是HTML语言的PLUSIN（插件），插件的功能大家应该知道，就是壮大原有的功能。你可以精确的控制主页里的每一个元素，比如一个字，用CSS你可以给它控制它的前景色、背景色、背景图片、在页面的精确位置，四周加入边框等。可以说CSS的功能是无比的强大。W3C 也极力向世界推广这一先进技术。
如下列：前景色为兰色，背景色为银色。
前景色为兰色，背景色为银色
如果你使用frontpage 98 的话，过程很简单，具体如下：
1、先选择要控制的文字，被选择了的文字以反白显示，如下：
然后在其上击鼠标右键，单击“字体属性”后弹出如下图：
单击左下脚”样式(S)……“后出现如下图：
单击”颜色“，选择前景色和背景色；
单击”字体“选择主字体和大小
然后按”确定“就搞定了。
也许很多人对CSS的一般用途熟悉，但是可能只有少数人知道CSS里面竟然还有象PHOTOSHOP里一样的滤镜。是不是有点惊讶。^_^ 不要着急，请跟着我去揭开其中的奥秘！
