标签: web

理解CSS3渐变背景

CSS3 支持定义渐变的背景,这个功能很实用,今天试用了一下,大概了解了基本的设置方式。

####Webkit 类浏览器设置

/*例子*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
  • 第一个参数指定渐变的类型,linear(线性)或 radial(径向)。
  • 第二个参数指定渐变开始的坐标,可以是数字或百分比,也可以是关键字(如 left-top )。
  • 第三个参数指定渐变结束的坐标。
  • 第四个参数指定渐变开始的颜色。
  • 第五个参数指定渐变结束的颜色。

####Firefox 浏览器设

/*例子*/
background: -moz-linear-gradient(top, red, blue);
  • 第一个参数指定从哪里开始渐变( 例子里用的是 top ,还可以是指定角度如-45deg )。
  • 第二个参数指定渐变开始的颜色(red)。
  • 第三个参数指定渐变结束的颜色(blue)。

####效果

参考链接:
http://webkit.org/blog/175/introducing-css-gradients/
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

iframe 自适应高度

今天碰到一个客户要求在他网站上添加背景音乐,还是要求切换栏目的时候不间断那种。囧……我最讨厌就是浏览有背景音乐的网站了,但好像国内的小企业客户就喜欢这样来。没办法,要不间断播放我只能想到用框架大法了。

但是,用iframe的时候却碰到了个问题:

<iframe src="source.html" width="100%" scrolling="auto" frameborder="0" height="100%">
</iframe>

这样设置的时候,在FF下是OK的,但是在IE下,却是有两个滚动条,这并不是我想要的效果。

最后,在网上找了一段JS代码,将iframe的高度自动设置,问题得到解决。

<script type="text/javascript">
 function SetCwinHeight(){
  var iframeid=document.getElementById("web"); //iframe id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight;
    }
   }
  }
 }
</script>
<iframe id="web" onload="Javascript:SetCwinHeight()" src="source.html" width="100%" scrolling="no" frameborder="0" height="87">
</iframe>

margin-top 在Firefox和IE8下的问题

最近,在写CSS样式的时候总碰到一个问题(其实也不是最近才碰到,只不过是最近才比较在意而已),那就是当我对一个层用了margin-top这个属性的时候,这个层本身并没有如预期一样起作用,反而是它的父级应用了这个属性!如下图:

firefox-margin-top-bug