css3之渐变色彩

色彩渐变 ： gradient（线性渐变 和 径向渐变）

支持情况： IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+

linear-gradient(to right,red,green)  

linear:渐变类型，radial为径向渐变

to right ：渐变方向 ，可以写角度（相当于90deg）

red,green:从红色渐变到绿色，可以有多个值

 

这里要说一点的，

浏览器的实现有些许不同，统一的标准 是这个样子的

   background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

下面小编来画几个渐变的图形

p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:linear-gradient(80deg,pink,indigo);
}

 

再让我们看下径向的渐变

p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:radial-gradient(pink,indigo);
}

来一个中间粉粉的灯光效果，有木有看起来心情愉悦呢，嘿嘿。

（这里用的是chrome）

div {
width:200px;
height:200px;
background:-webkit-radial-gradient(100px 0px,pink,indigo);
}

 

在来个紫色的球 粉色的光。

div {
width:200px;
height:200px;
border-radius:100px;
background:-webkit-radial-gradient(55px 55px,pink,indigo,pink);

}

 

感觉好漂漂~哈啊哈

 

转载于:https://www.cnblogs.com/fnncat/p/4854616.html