案例总结：有趣的css3渐变

不打算多说（说太多没用，要学会查看文档），但打算细聊。
（文中有实例）

背景

由css -> css3，确实发展了很多，页面更加灵活，“动画”也被强调。
以“transition”、“tranform”、“animation(-duration)”属性为首的N大属性让前端开发者往往“欲罢不能”。

浅谈“渐变”

横向渐变、径向渐变、由内而外。。。

这里给大家分享几个有趣的渐变色，用来丰富页面。

一、背景色渐变
经常用的就是给背景色增加渐变效果，这里的语法顺序不要错（牵扯到优雅降级和渐进增强，标准语法写到最后也是为了兼容各个版本浏览器，让浏览器先执行兼容在执行标准。），(right, red , blue) 这句话决定渐变方向是从右向左变色（效果如下）。( to right, red , blue) 的话就是要从左向右渐变，用CSS3的角度也可以改变渐变色的方向譬如： 50deg，也可以在颜色后面增加 50% 百分比来决定渐变位置，还有更多隐藏 buff 值得大家来探索。

html
<div class="box">
    <div class="main"></div>
</div>
css
  .box{width: 300px;height: 300px;
            background: -webkit-linear-gradient(right, red , blue); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
            background: linear-gradient(right, red , blue); /* 标准的语法（必须放在最后） */
        }

又如：

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

这里用到了：起始点（Starting Point），工作方式类似于 background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。其工作方式主要包含：Top → Bottom、Left → Right、bottom → top、right → left等，接着我们主要一种一种来看其实现的效果：

1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ace, #f96); 
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ace, #f96);

2、始于left（水平方向）和center（垂直方向）也是就Left → Right：

/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96);

3、起始于left（水平方向）和top（垂直方向）:

background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);

二、字体渐变色
如，由上而下逐渐深色。
（这个不一定用于字体，你像看过我某一篇文章（我忘了…）的都熟知，图片的模糊处理和透明，以及背景颜色的透明度设置，这样就可以解决背景颜色突变的问题（这困扰了我好久。。。））

html
<div class="box">
    <div class="main">CSDN</div>
</div>
css
  .box{width: 300px;height: 300px;font-size: 100px;
            background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(255, 255, 255));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

三、input框提示信息颜色
这里多说一个改变input框提示信息颜色的改变。
这个在vue（现在的前端框架潮流）中经常可以使用，当然不是本文中的用法。

html
<input type="text" placeholder="CSDN">
css
      input::-webkit-input-placeholder { color: red; }/* WebKit browsers */
      input:-moz-placeholder {  color: red; }/* Mozilla Firefox 4 to 18 */
      input::-moz-placeholder { color: red; }/* Mozilla Firefox 19+ */
      input:-ms-input-placeholder {  color: red; }/* Internet Explorer 10+ */

加深印象——实例剖析

如何实现图片的淡隐淡出特效？
——通过控制图片的边。

<img style="filter: alpha(opacity=0)" alt="image" src="图片路径" border="0" name="u">
<script>
    var b=1;
    var c=true;
    function fade() {
        if(document.all);
        if(c===true){
            b++;
        }
        if(b===100){
            b--;
            c=false;
        }
        if(b===10){
            b++;
            c=true;
        }
        if(c===false){
            b--;
        }
        u.filters.alpha.opacity=0 + b;
        setTimeout("fade()",50);
    }
</script>

可以放在编译器上试试。。。