Aug222010

使用CSS3的Linear Gradients (线性渐变)制作渐变背景按钮

14:43 by Azrael

该方法用到主要特性是gradient

gradient只有ff和webkit内核的浏览器有支持,不过目前都还是私有的,不知道何时才能标准化

在ff和webkit的调用方式都还不一样,具体可以看这里和这里,说明的很清楚了

ie可以用滤镜达到效果,一如既往的无视它

来看看效果先:

用到的主要代码如下:

    background-image:-moz-linear-gradient(0% 10% 270deg, #FFFFFF,#E5F0E0, #F4FFF0 100%);
    background-image:-webkit-gradient(linear,0% 60%, 0% 40%, from(#E5F0E0), to(#FFFFFF));

完整的demo请点击这里

分类: CSS | 标签: ,
  1. annuaire gratuit 2010/09/09 02:07

    I am a webmaster in a belgian web agency and we started use CSS 3, it’s amazing ! We use HTML 5 Doctype, it’s easier and very clean.

  2. Azrael 2010/09/10 18:18

    thanks, I’m grad to hear that

  3. Brittaney Brotherson 2011/05/23 18:10

    Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your site? My website is in the exact same niche as yours and my visitors would genuinely benefit from some of the information you present here. Please let me know if this ok with you. Appreciate it!

  4. Azrael 2011/05/24 00:03

    ok, you can use it for non-commercial

blog