|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介:这篇文章将告知你怎样誊写CSS突变代码使其兼容支流扫瞄器:IE,Firefox3.6+,Safari和Chromr。别的,实验更新利用了CSS突变的下拉菜单演示。
Webkit先容CSS突变特征差未几有两年工夫了,但因为与年夜部分扫瞄器不兼容的缘故原由,很少实践使用。值得欣喜的是Firefox3.6+已撑持CSS突变,我们能够经由过程款式出现突变效果,而不用创立一个突变图象。这篇文章将告知你怎样誊写CSS突变代码使其兼容支流扫瞄器:IE,Firefox3.6+,Safari和Chromr。别的,实验更新利用了CSS突变的下拉菜单演示。
Webkit引擎
以下代码合用于webkit引擎的扫瞄器,如Safari,Chrome等。它会从顶部(#ccc)究竟部(#000)出现一个线性突变。- background:-webkit-gradient(linear,lefttop,leftbottom,from(#ccc),to(#000));
复制代码
Firefox3.6+- background:-moz-linear-gradient(top,#ccc,#000);
复制代码
InternetExplorer
以下的滤镜代码只能被IE注释实行:- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#000000);
复制代码
跨扫瞄器CSS突变(演示)
分离将下面的三块代码,就是一个跨扫瞄器的突变效果。注:我增加了一个背景色彩以防用户利用的扫瞄器不撑持该功效。- background:#999;/*fornon-css3browsers*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#000000);/*forIE*/background:-webkit-gradient(linear,lefttop,leftbottom,from(#ccc),to(#000));/*forwebkitbrowsers*/background:-moz-linear-gradient(top,#ccc,#000);/*forfirefox3.6+*/
复制代码
CSS突变下拉菜单
以下是一个利用CSS3笔墨暗影(text-shadow),圆角(radius-border),暗影(box-shadow)的纯CSS突变下拉菜单,未触及任何JavaScript或图片。
InternetExplorer的范围性
IE的突变滤镜不撑持多重突变(color-stop),突变角度(gradientangle),径向突变(radialgradient)。这意味着你只能利用StartColorStr和EndColorStr两种色彩指定程度或垂直的线性突变。
停止语
请注重并非一切扫瞄器都撑持CSS突变属性。为包管平安,在编码页面结构时不要依附于CSS突变,它只合适用来增强款式体现。
</p>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。 |
|