CSS3中的渐变效果,Css背景渐变

(3)重复渐变效果:

                
可以看出使用角度就可实现任意角度的线性渐变,可以这样理解使用角度渐变时的坐标系,如下图,箭头方向就是渐变方向(自*向*),角度呈顺时针变化,大家可以自己试一试验证一下。

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点不均匀分布

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
.div1 { width: 300px; height: 300px; background: repeating-radial-gradient(circle at center, red 0%, green 10%, pink 20%);}

.div2 { width: 300px; height: 100px; margin-top: 20px; background: repeating-linear-gradient(45deg,#fff 0%, yellow 10%);}

起点颜色,终点颜色:这不是固定的两个参数,其中可以插入多个颜色值.

使用多个颜色结点

#grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
}

图片 1

linear-gradient([point || angle]? stop,stop[,stop]*)

                
我们可以通过百分比来设置颜色的停止点,默认值为0%,终点为100%;如上图所示。如果设置100%,这不会出现渐变效果

不同尺寸大小关键字的使用

#grad1 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
}

#grad2 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
}

#grad3 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
}

#grad4 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
}

图片 2图片 3 图片 4图片 5

 

示例:

Top,left,right,bottom可以组合以实现不同的角度,但是角度与角度之间是不可以的,不要理所当然角度可以替代关键字。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个direction参数是方向,可以是left,right,top,bottom,**left top,**bottom right,to left,to left top 等这些方向名字

             也可以是角度,角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

 

 图片 6

语法:

语法:

 

shape:渐变的形状。ellipse表示椭圆形,circle表示圆形。默认为ellipse。另外,如果元素形状为正方形,则ellipse和circle的显示一样。

参数说明:

 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

第一个参数表示线性渐变的方向。有四个取值,分别是:to left:设置渐变从右到左。相当于270deg。to right:设置渐变从左向右。相当于90deg。to top:设置渐变从下到上。相当于0deg。to bottom:设置渐变从上到下。相当于180deg。这是默认值。

使用关键字

CSS3 定义了两种类型的渐变(gradients):

position:确顶圆心的位置。如果提供2个参数,第一个代表横坐标,第二个代表纵坐标;如果只提供一个,第二个值默认为50%,即center。

参数说明:

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

第三个参数是终点颜色。

不同的形状

浏览器支持

图片 7

沿着某条直线朝一个方向产生渐变效果

举例

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

color:指定颜色。

形状:可选值,可以指定渐变形状为圆形(circle)或者椭圆(ellipse),默认值为圆形。

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
radial-gradient([[shape || size] [at position]?, | at position]?color-stop[,color-stop]+)

                

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)

渐变是CSS3中比较丰富多彩的一个特性,通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。

代码:

利用repeating-linear-gradient或者repeating-radial-gradient设置。

语法:

(1)线性渐变:

        
代码:

div { width: 300px; height: 300px; background: linear-gradient(to right,red 0%, blue 33%, green 68%, yellow 100%);}

数值型:如果指定一个长度值,则表示为圆的半径,如果是两个值则第一个表示水平半径,第二个表示垂直半径(px或百分比)

从一个中心点开始向四周产生渐变效果。

#gradient1{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}  

参数说明:

渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而下渐变,left是自左向右渐变。同时也可将两者结合起来,比如top left表示自左上方向右下方渐变。

第二个参数是起点颜色,可以指定颜色开始的位置

#gradient1{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top,#000,#FFF);/*自上向下渐变*/}   
#gradient2{   
    width:200px;   
    height:200px;   
    background:linear-gradient(left,#000,#FFF);/*自左向右渐变*/}   
#gradient3{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top left,#000,#FFF);/*自左上角向右下角渐变*/}  

参数说明:

代码

示例:

        
代码

时间: 2019-12-08阅读: 142标签: 渐变

                
closest-corner与farthest-corner

.div1 {width: 200px;height: 200px;background: radial-gradient(circle at center, red, blue);}.div2 {width: 200px;height: 200px;border-radius: 100px;background: radial-gradient(circle at 50px 50px, #eeffff, #334455);}.div3 {width: 200px;height: 200px;border-radius: 100px;background: radial-gradient(circle at 50px 50px, #eeffff 0%, #666 70%, rgba(33, 33, 33, 0.8) 80%);}.div4 {width: 200px;height: 200px;background: radial-gradient(ellipse at center, red, green, blue);}.div5 {width: 200px;height: 200px;background: radial-gradient(circle closest-side at center, red, green, blue);}.div6 {width: 200px;height: 100px;background: radial-gradient(circle at center, red, green, blue);}.div7 {width: 200px;height: 100px;background: radial-gradient(ellipse at center, red, green, blue);}

        
closest-side与farthest-side

示例:

radial-gradient([ [ 形状] || [形状尺寸] [ at 位置 ] ,起始颜色,结束颜色)

语法:

#gradient1{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF 10%)}  

size:渐变的大小,即渐变到哪里停止。有四个取值:closest-side | closest-corner | farthest-side | farthest-corner。默认值为farthest-corner。

举例

(2)径向渐变:

#gradient1{   
    background:linear-gradient(0deg,#000,#FFF);}   
#gradient2{   
    background:linear-gradient(60deg,#000,#FFF);}   
#gradient3{   
    background:linear-gradient(90deg,#000,#FFF);}   
#gradient4{   
    background:linear-gradient(180deg,#000,#FFF);}   
#gradient5{   
    background:linear-gradient(270deg,#000,#FFF);}  

                
代码

#gradient1{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle farthest-corner at 20% 20%,#000,#FFF)}  

background:linear-gradient( 渐变方向,起点颜色,终点颜色 )

farthest-side:通过离渐变中心最远的的边来确定圆的半径或者椭圆的垂直半径和水平半径;

形状尺寸:可选值,指定渐变形状的尺寸,若不指定默认值为farthest-side:

 

#gradient1{   
    background:linear-gradient(left,#000 20%,#FFF);}  

closest-side:通过离渐变中心最近的边来确定圆的半径或者椭圆的垂直半径和水平半径;

起始位置和结束位置:同线性渐变

#gradient1{   
    background:linear-gradient(left,#F00, #0F0, #00F, #FF0, #0FF, #F0F);}  

(正确)linear-gradient(top left,#000,#FFF);

指定颜色停止位置

repeating-linear-gradient(语法同上);

代码:

        
使用角度

 
同样径向渐变的半径必须在可视的范围之内不然也看不到效果

farthest-corner:通过离渐变中心最远的的角来确定圆的半径或者椭圆的垂直半径和水平半径;

closest-corner:通过离渐变中心最近的角来确定圆的半径或者椭圆的垂直半径和水平半径;

#gradient1{   
    width:400px;   
    height:200px;   
    background:radial-gradient(circle,#000,#FFF)}   
#gradient2{   
    width:400px;   
    height:200px;   
    background:radial-gradient(ellipse,#000,#FFF)}  

线性重复渐变最后一个颜色必须指定颜色的停止位置,不然就无法重复,因为默认单位停止位置是100%,如下:

 

语法:

        
组合使用

位置:以at开头,用法同background-position,若不指定默认值为center;

repeating-radial-gradient(语法同上);

 

举例:

(错误)linear-gradient(180deg 90deg,#000,#FFF);

重复渐变

 
使用多个颜色值

closest-side与closest-corner

径向渐变

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:CSS3中的渐变效果,Css背景渐变

相关阅读