Css3渐变属性

前言

本文主要写css3渐变属性，以及兼容写法

提示：以下是本篇文章正文内容，下面案例可供参考

一、线性渐变

1.正常写法

1>线性渐变-平行
background-image:linear-grdient(to left,color1,color2,…)
（第一个参数表示开始方向）

background-image:linear-gradient(to right,red,blue,green);

注意：正常写法开始方向前必须加 to

2>线性渐变-对角
background-image:linear-grdient(to left top,color1,color2,…)
（第一个参数表示开始方向)

background-image:linear-gradient(to right top,red,blue,green);

2.兼容写法

1>方向
（第一个参数表示开始方向）
background-image:-webkit-linear-gradient(left,color1,…)
background-image: -moz-linear-gradient(left,color1,…)
background-image: -o-linear-gradient(left,color1,…)
background-image:linear-grdient(to left,color1,…)
注意：兼容写法开始方向前不加 to

2>度数
（第一个参数表示旋转度数）
background-image: -webkit-linear-gradient(80deg,color1,…)
background-image: -moz-linear-gradient(80deg,color1,…)
background-image: -o-linear-gradient(80deg,color1,…)
background-image: linear-gradient(10deg,color1,…)
写度数时，一定要注意兼容写法要用 90-你的方向值

3.渐变梯度

background-image: linear-gradient(90deg,red 20%,…)
（度数后加百分比可以实现梯度变化）

background-image:linear-gradient(90deg,red,blue 20%,pink);

二、径向渐变

1.径向渐变

background-image:radial-gradient(color1,color2,…)
注意：属性值最少两个

background-image: radial-gradient(red,blue)

2.控制渐变

1>基本语法
background-image: radial-gradient(shape size at position ,start-color1,…,last-color2);

1)position: left / right / center / top / bottom
2)shape: circle / elipse
3) size：closest-side （渐变到最近边） farthest-side（渐变到最远边） closest-corner（渐变到最近角） farthest-corner（渐变到最远角）

总结

以上是对Css3属性渐变的全部整理的，仅供参考