实用的CSS3－渐变背景色

线性渐变背景色：

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

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

 

放射性渐变：

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

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

 

#c{

    background:white;

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

}

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)");

});

 

 

转载于:https://www.cnblogs.com/Better-Me/p/3478920.html