1、background: linear-gradient(to left,#d3959b,#bfe6ba); to left 设置渐变从右到左,相当于270deg 2、background: linear-gradient(to right,#d3959b,#bfe6ba); to right设置渐变从左到右,相当于90deg 3、background: linear-gradient(to
/*从上到下,蓝色渐变到红色*/linear-gradient(blue,red);/*渐变轴为45度,从蓝色渐变到红色*/linear-gradient(45deg,blue,red);/*从右下到左上、从蓝色渐变到红色*/linear-gradient(tolefttop,blue,red);/*从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束*/linear-gradient(0deg,...
<side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]? 取值: 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <angle>:用角度值指定渐变的方向(或角度)。 to left:设置渐变为从右到左。相当于: 270deg to right:设置渐变从左到...
direction:to bottom、to top、to right、to left、to bottom right,等等 也可以使用角度angle(如:7deg),在渐变规则中,0deg代表由左到右的渐变,90deg为从上到下的渐变。 transparent:使用透明度,用rgba( )定义颜色 #grad{background-image:linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1)...
to left:设置渐变为从右到左。相当于: 270deg to right:设置渐变从左到右。相当于: 90deg to top:设置渐变从下到上。相当于: 0deg to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。 <color-stop>:用于指定渐变的起止颜色: ...
2)、to bottom : 颜色从上往下渐变,如下案例 2: .box{ width:300px; height:150px; background:linear-gradient(to bottom,#f00,#67f) } 网页效果如下: 3)、to left : 颜色从右往左渐变,如下案例 3: .box{ width:300px; height:150px; background:linear-gradient...
background:linear-gradient(to bottom,#f00,#67f) } 1. 2. 3. 4. 5. 6. 网页效果如下: 3)、to left : 颜色从右往左渐变,如下案例 3: .box{ width:300px; height:150px; background:linear-gradient(to left,#f00,#67f) } 1. 2. 3. 4. 5. 6...
1、background: linear-gradient(to left,#d3959b,#bfe6ba); to left 设置渐变从右到左,相当于270deg 2、background: linear-gradient(to right,#d3959b,#bfe6ba); to right设置渐变从左到右,相当于90deg 3、background: linear-gradient(to top,#d3959b,#bfe6ba); ...
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：第一个参数省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。例如：background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);...
direction可以是角度(如45deg)或者关键词(如to right)。 color-stop是颜色值,后面可以跟一个位置百分比或长度。 类型 方向: 使用角度(如90deg表示垂直向下)。 使用关键词(如to top、to bottom、to left、to right等)。 颜色停止点: 可以指定任意数量的颜色停止点。