清水的百宝箱

大家都知道现在已经是css3时代了，相信看到这篇文章的您也一定垂涎于

border-radius和box-shadow这样的属性吧。

虽然用上了ie-css3.htc 之后，可以感受到css3的强大，但是在实际使用中，大家一定非常头疼于不兼容

比如以下两段代码；

第一段:

.test {
width:560px;
height:400px;
background-color:#FFFFFF;
padding:10px 8px 6px;
border: 1px solid #ff0000;
margin-bottom:10px;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

<div id="sveinjoe">
<div>
这个页面是用以测试主机是否有正确的content-type。
</div>
</div>

经过测试，正常显示圆角和阴影，那么如果我对test的外围div设置背景之后，

#sveinjoe{
width:962px;
height:1000px;
margin:0 auto;
background-color:#FFFFFF;
}

 

效果就大大的不相同了，圆解和阴影都不见了，这里为了排除边框和底色颜色一致导致圆角看不到的可能，我把边框的颜色设置为了红色。但是还是没有显示。

所以初步结论是在多层DIV中，如果下一层的DIV设有背景的话，border-radius    box-shadow 失效；

一般DIV+CSS网站制作布局时经常会遇到LI点的情况，特别是对新手来说可能有点陌生，如何去掉<li></li>中 的点呢，或者如何改变点成数字1234或者改成空心圆方块等呢，又如何改变点的颜色？其实很简单：直接定义LI的CSS为list-style-type :none即可去掉点，如
li{
list-style-type :none;
}

如果要改变点的颜色，那么li里的字也会变颜色与大小的了，但你可以使用图片来作为前面的点，这样就可以随心所欲地装饰了。
li{
list-style: url("pre.gif") outside circle;
}

LI点的其他用法CSS代码：
list-style-type :
disc   默认值。实心圆
circle   空心圆
square   实心方块
decimal   阿拉伯数字
lower-roman   小写罗马数字
upper-roman   大写罗马数字
lower-alpha   小写英文字母
upper-alpha   大写英文字母
none   不使用项目符号

摘自：广州奇亿网站建设工作室

语法：STYLE="filter:filtername(fparameter1, fparameter2...)"

（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

滤镜说明：

Alpha：设置透明层次

blur：创建高速度移动效果，即模糊效果

Chroma：制作专用颜色透明

DropShadow：创建对象的固定影子

FlipH：创建水平镜像图片

FlipV：创建垂直镜像图片

glow：加光辉在附近对象的边外

gray：把图片灰度化

invert：反色

light：创建光源在对象上

mask：创建透明掩膜在对象上

shadow：创建偏移固定影子

wave：波纹效果

Xray：使对象变得像被x光照射一样

1、滤镜：Alpha

语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"

说明：

Opacity：起始值，取值为0～100, 0为透明，100为原图。

FinishOpacity：目标值。

Style：1或2或3

StartX：任意值

StartY：任意值

例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、滤镜：blur

语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

说明：

Add：一般为1，或0。

Direction：角度，0～315度，步长为45度。

Strength：效果增长的数值，一般5即可。

例子：filter:Blur(Add="1",Direction="45",Strength="5")

3、滤镜：Chroma

语法：STYLE="filter:Chroma(Color = color)"

说明：color：#rrggbb格式，任意。

例子：filter:Chroma(Color="#FFFFFF")

4、滤镜：DropShadow

语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

说明：Color:#rrggbb格式，任意。

Offx：X轴偏离值。

Offy：Y轴偏离值。

Positive：1或0。

例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、滤镜：FlipH

语法：STYLE="filter:FlipH"

例子：filter:FlipH

6、滤镜：FlipV

语法：STYLE="filter:FlipV"

例子：filter:FlipV

7、滤镜：glow

语法：STYLE="filter:Glow(Color=color, Strength=strength)"

说明：

Color：发光颜色。

Strength：强度(0－100)

例子：filter:Glow(Color="#6699CC",Strength="5")

8、滤镜：gray

语法：STYLE="filter:Gray"

例子：filter:Gray

9、滤镜：invert

语法：STYLE="filter:Invert"

例子：filter:Invert

10、滤镜：mask

语法：STYLE="filter:Mask(Color=color)"

例子：filter:Mask (Color="#FFFFE0")

11、滤镜：shadow

语法：filter:Shadow(Color=color, Direction=direction)

说明：

Color：#rrggbb格式。

Direction：角度，0－315度，步长为45度。

例子：filter:Shadow (Color="#6699CC", Direction="135")

12、滤镜：wave

语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

说明：

Add：一般为1，或0。

Freq：变形值。

LightStrength：变形百分比。

Phase：角度变形百分比。

Strength：变形强度。

例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、滤镜：Xray

语法：STYLE="filter:Xray"

例子：filter:Xray

14.颜色变化

语法：

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

(责任编辑：大宝库)