css渐变的小花招

一、背景色渐变
经常用的就是给背景色增加渐变效果，这里的语法顺序不要错（牵扯到优雅降级和渐进增强，标准语法写到最后也是为了兼容各个版本浏览器，让浏览器先执行兼容在执行标准。），(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); /* 标准的语法（必须放在最后） */
        }

二、字体渐变色
字体渐变色是不是很酷炫，但是这个字体如果不够大不好看出渐变效果（可以配合下面镂空字体使用）。

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;
        }

三、镂空字体
空心字体~

html
<div class="box">
    <div class="main">CSDN</div>
</div>
css
.box{width: 300px;height: 300px;font-size: 100px;
 -webkit-text-fill-color:transparent;
            -webkit-text-stroke:1px #000;
        }

四、input框提示信息颜色
这里多说一个改变input框提示信息颜色的改变。

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+ */