色彩渐变 : gradient(线性渐变 和 径向渐变)
支持情况: IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+
linear-gradient(to right,red,green)
linear:渐变类型,radial为径向渐变
to right :渐变方向 ,可以写角度(相当于90deg)
red,green:从红色渐变到绿色,可以有多个值
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);
}
时间: 2024-11-06 18:43:44