CSS3渐变属性是CSS3规范中新增的一个属性，它可以让我们在网页中制作出丰富的颜色渐变效果，为网页增加更多的美感和视觉效果。下面，我们来介绍一下CSS3渐变属性的具体内容。
CSS3渐变属性分为线性渐变和径向渐变，其中线性渐变又分为水平方向和垂直方向。
一、线性渐变属性
1、水平方向线性渐变
语法：background: linear-gradient(to right, #00FFFF, #FF00FF);
解析：to right表示从左往右渐变，#00FFFF和#FF00FF表示变化的颜色，可以设定多组色值。
2、垂直方向线性渐变
语法：background: linear-gradient(to bottom, #00FFFF, #FF00FF);
解析：to bottom表示从上往下渐变，#00FFFF和#FF00FF表示变化的颜色，可以设定多组色值。
二、径向渐变属性
径向渐变的语法写法和线性渐变类似，也有两类：半径的长度值和两个位置关键字。其中，第一个位置关键字表示圆心，x轴方向左为负值，右为正值，y轴方向上为负值，下为正值；第二个位置关键字表示渐变的开始位置，其值的规则与第一个位置关键字相同。
1、半径的长度值
语法：background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF, #FF00FF);
解析：ellipse表示为椭圆形，farthest-corner表示为最远角，45px和45px为圆心坐标，#00FFFF和#FF00FF表示渐变的颜色，可以设定多组色值。
2、两个位置关键字
语法：background: radial-gradient(at top left, #00FFFF, #FF00FF);
解析：at top left表示渐变中心在左上角，#00FFFF和#FF00FF表示变化的颜色，可以设定多组色值。
以上就是CSS3渐变属性的具体介绍，通过使用CSS3渐变属性可以制作出很多炫酷的效果，它对于网页的美化起到了很大的作用
以上是css3渐变属性有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！
