当前位置: 主页>网站教程>CSS教程> CSS3线性渐变实现4圆环相连（代码实例）

分享文章到：

CSS3线性渐变实现4圆环相连（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

1、一个彩色圆环的大小是400px*400px,里面空白圆环大小为260px*260px；2、右侧圆环和左边圆环的左移距离为120px；3、下边圆环和上边圆环的上移距离为20px思绪剖析：...

本文指标：

1、把握CSS3中线性渐变（linear-gradient）的实现办法

题目：

请求实现下列结果，运用纯DIV+CSS，必需运用见识点线性渐变（linear-gradient）,且居中显示

附加注明：

1、一个彩色圆环的大小是400px*400px,里面空白圆环大小为260px*260px

2、右侧圆环和左边圆环的左移距离为120px

3、下边圆环和上边圆环的上移距离为20px

思绪剖析：

1、最外层是一个绿色边框的div，里面包裹着4个圆环

2、div分高低两局部，两局部其实都是同样的，只有实现了上脸部分，下脸部分其实是可以拷贝，只是margin-top要更改一下

3、每个圆环其实都是同样，只是位置不一样，所以只有把一个渐变圆环实现出来，其他所有的圆环都可以复制首先个圆环

此刻来概括操纵

1、新建好index.html，写好架构

架构想路：

1、外层容器我们就叫做.container容器，里面分成.top,.bottom两局部，每个局部里面包括两个圆环div,

并行的两个div圆环，由于要水平罗列，所以确定需要float，既然float，了，在容器的最后需要加上一个.clear的div，革除浮动，这样可以让容器仍然包裹住两个float的圆环div

2、每个圆环其实也是由两个局部组成，一个外层彩色圆环和内层一个白色的小的圆环

依据剖析得出下列架构代码




    
    
    渐变圆环

2、接下来，写样式

1、新建css文件夹，利便治理所有的css文件，新建index.css，里面的样式怎么写呢，思绪如下：

1、.container *

思绪剖析

1、为了设定容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内

所以index.css中增加代码如下：

.container *{
    padding:0;
    margin: 0;
}

2、外层彩色圆环.colorcircle

思绪剖析

1、依据请求得知，width:400px,height:400px,由于是圆形的，所以需要设定边框圆角为400px即border-radius: 400px;，

2、由于配景是七彩色的，所以需要用到线线渐变，并且色彩渐变从左到右顺次是红橙黄绿青蓝紫，所以转成代码即background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

3、然后用到了圆角，需要设定border,不然不会生效，但是它的边框是透亮的，所以转成代码即border:1px solid transparent;

4、为了确保圆环并行罗列，所以需要让它float:left

依据剖析，继续在index.css中增加代码如下：

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);    
    border:1px solid transparent;
    float: left; 
}

3、圆环内层白色小圆环 .smallcircle

思绪剖析：

1、依据请求得知，width: 260px，height:260px,由于是圆形的，所以需要设定边框圆角为260px即border-radius: 260px;，配景白色background-color: white;

由于要居中，所以它的左间距，上间距为70px=(400-260)/2

2、然后用到了圆角，需要设定border,不然不会生效，但是它的边框是透亮的，所以转成代码即border:1px solid transparent;

继续index.css中增加代码如下：

.smallcircle{
    width: 260px;
    height: 260px;
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}

4、.clear样式

思绪剖析：

1、需要革除浮动，所以需要float:none,clear:both

2、这种div里面没有内容，为了避免影响布局，需要设定width,height都为0

继续index.css中增加代码如下：

.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}

5、右侧圆环.circle2

思绪剖析:

1、依据请求得知，左移量为120px,所以margin-left:-120px

继续index.css中增加代码如下：

.circle2{
    margin-left:-120px;
}

6、下脸部分.bottom

思绪剖析：

1、依据请求得知，上移量为20px,所以margin-top:-20px

继续index.css中增加代码如下：

.bottom{
    margin-top:-20px; 
}

7、最外层.container

思绪剖析

1、由于整体要居中，所以转成代码即 margin:0 auto;由于是绿色边框所以 border:1px solid green;

2、div默许宽度是100%，为了让它居中，需要设定宽才可以，width=684px(400+400+4【圆环4个border】-120),高度=784(400+400+4【圆环4个border】-20)

继续index.css中增加代码如下：

.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

到此为止，index.css所有内容如下：

.container *{
    padding:0;
    margin: 0;
}

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    
    border:1px solid transparent;
    float: left; 
}
.smallcircle{
    width: 260px;
    height: 260px;
   
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}
.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.circle2{
    margin-left:-120px;
}


.bottom{
    margin-top:-20px; 
}
.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

然后将index.css引入index.html中




    
    
    渐变圆环

运转效果如下：

index.css中.bottom代码修改如下：

.bottom{
    margin-top:-20px; 
    position: absolute;
}

我们再来运转结果：

我们发明结果实现了

还有一种办法就是

2、通过让.top,.bottom高低两个div都float:left，也可以解决，只不外这样在.container的最后需要增加.clear 块

index.html代码修改如下：




    
    
    渐变圆环

index.css代码如下：

.container *{
    padding:0;
    margin: 0;
}

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    
    border:1px solid transparent;
    float: left; 
}
.smallcircle{
    width: 260px;
    height: 260px;
   
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}
.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.circle2{
    margin-left:-120px;
}

/* 解决上移题目 */
.bottom{
    margin-top:-20px; 
    float: left;
}
.top{
    float: left;
}
/* end */
.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

运转效果为：

结果还是同样的

到此为止，我们就实现了全部的需求