CSS中渐变背景的使用以及注意事项
在IE浏览其中,使用滤镜可以产生很多好看的效果。渐变色是其中的一种。方式如下:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff",endColorStr="#336699",gradientType="1");
分别设置起始颜色与结束颜色,gradientType设置方向,1为横向,0为纵向。
用于设置背景的对象必须指定其高度或者宽度,否则将没有效果。
在调试的时候发现,属性与值之间不能有任何空格,否则将会导致后续的CSS定义全部失效,自身定义也有点问题。
让我疑惑的是,我在一个网站上http://www.okajax.com/Index.html 这个网页上查看的时候,发现其CSS文件中是有空格的,但是显示还是正确的。在自己编写代码的时候就不行了。值得注意的是,该主页中设置的是表格单元格的背景,而我设置的是div对象的背景,而且我使用的文档类型是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,而该主页没有注明文档标准。
注:后通过将本人编写的网页去掉文档类型后发现,属性与值间有空格也可以了。这表示XHTML1.0标准中是不允许出现属性与值之间出现空格的,导致后续的CSS设置没有任何效果。相对于没有指定任何文档类型的情况而言,IE浏览器解释的时候更为严格。
本次示例也提醒我一件事,照搬代码的时候还需要考虑不同的文档类型导致的IE浏览器解释效果不同,同时在编写代码的时候,要注意,严格遵守编写规则。