css背景渐变几种样式

html-css021

css背景渐变几种样式,第1张

有两种样式,一种是线性渐变,一种是径向渐变

线性渐变:background:linear-gradient(0deg,red,orange)0deg意思是渐变角度为0°

径向渐变:background:linear-gradient(circle,red 0%,orange)circle的意思是径向渐变的形状是圆形,eclipse是椭圆形(默认) 0%表示调整径向渐变颜色节点不均匀分布.

在CSS3中,定义了两种类型

(1)线性渐变:向下/向上/向左/向右/对角方向,使用linear-gradient()

(2)径向渐变:由它们的中心定义,使用radial-gradient()

径向渐变:

1. 设置渐变形状,如果是正圆,需要设置circle参数。

2. center x,center y表示圆心位置,可使用百分比,px等单位。

3. size 设置圆的半径大小,可使用关键字和数值两种表达方式。 不知道我这样说的是否明白,最好看下教程,在土豆原创里面搜索“CSS3 的圆角边框、阴影和渐变”,一定要在原创下面搜啊,要不然搜出来好多没用的东西