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);
}
感觉好漂漂~哈啊哈