CSS3－渐变背景色

线性渐变背景色：

<style>

.linear { width:130px; height:130px; border:2px solid black; padding: 10px;

           background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));

           -webkit-background-origin: padding; -webkit-background-clip: content; }

</style>

<div class="linear"></div>

第 一个参数为渐变方式，后两个参数为起始点位置和终止点位置，后两个参数为起始颜色和终止颜色，后面那个参数为背景区域padding表示包含 padding的区域，content表示不包含content的区域，最后那个参数为背景的实际使用区域，可以为content或padding。

线性渐变的另一种简化写法：

<div style="border-radius:20px;height:200px; background:-webkit-linear-gradient(yellow,orange,red,green,blue,purple);">

</div>

放射性渐变：

<style>

.radial {

        width:150px;

        height:150px;

        border:2px solid black;

        background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),

            -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),

            -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),

            -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

        display: block;

}

</style>

<div class="radial"></div>

radial之后的四个数字分别是起始点坐标，起始圆半径，终止点坐标，终止圆半径。to的颜色最后都变成了完全透明，否则的话不会受到终止圆范围的限制。color－stop可以有多个，用来调整渐变途径中的颜色。

此外，可以通过-webkit-background-size: 20px 50px;指定一块背景区域的长，高，或-webkit-background-size: 20px;同时指定长和高，来指定

一个背景区域的大小。这样可以实现平铺的效果等。

放射性渐变的另一种写法：

safari对渐变的实现默认并不是圆形，而是上面那样根据div的大小变化的椭圆形，但是chrome的实现是圆形。如果safari要实现标准的圆形，可改为(circle,white,black).

放射性边框图片：

-webkit-border-image: -webkit-radial-gradient(white,red) 100%;

方式性渐变图片作为蒙板（实现文字现实区域跟随鼠标移动而变化）：

<style>

#c{

    background:white;

 -webkit-mask-box-image: -webkit-radial-gradient(50% 50%, white, transparent 80px);

}

</style>

<div id="c">

新华网杭州10月16日电(记者张遥、王政)淘宝商城15日下午再次发布公告，对近日备受争议的2012年收费规则作出详细解释。而组织本次行动的语音聊天群里仍有数万网民聚集，称等待淘宝给出解决办法。

　　因为修改收费规则受到抵触，11日晚间开始，中国最大的B2C电子商务平台淘宝商城持续受到数万名自称“中小卖家”的网民集体攻击，部分网店下架商品暂停营业。

　　淘宝商城在公告中表示，淘宝已经从两个半月之前针对新规定开始与卖家沟通，通过多种途径听卖家的想法建议。“9月份的时候，我们还专门为这个事情，请来各种类型不同类目的商家，开过2场面对面的沟通会。”淘宝方面称，绝大多数卖家支持这项新规定。

　　针对外界有关“新规定是变相涨价”的质疑，淘宝方面表示，调整不是涨价，年费从往年6000元调整至3万元、6万元两档，但是只要能达到一定经营规模和服务质量，就能获得部分或全部返还。

</div>

<script>

require('jquery.js');

var div=$('#c');

div.mousemove(function(e){

div.css("-webkit-mask-box-image","-webkit-radial-gradient("+e.offsetX+"px "+e.offsetY+"px, white, transparent 80px)");

});

</script>

 

参考http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html