CSS3线性渐变实现4圆环相连（代码实例）
本文目标：
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、每个圆环其实也是由两个部分组成，一个外层彩色圆环和内层一个白色的小的圆环
按照剖析得出以下架构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变圆环</title>
</head>
<body>
<div class="container">
<div class="top">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
<div class="bottom">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</body>
</html>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中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变圆环</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="top">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
<div class="bottom">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</body>
</html>运转结果如下：
发明下面部分.bottom的margin-top仿佛失效了，其实假如我们将.bottom的border设定成红色，可以看出，其实也是上移了20px，但是由于里面圆环是float的，且默许的postion为relative,所以圆环是没法再上移的，如何办呢？这里供给两种解决方案：
1、我们将.bottom的postion设定为absoute
index.css中.bottom代码修改如下：
.bottom{
margin-top:-20px;
position: absolute;
}我们再来运转结果：
我们发明结果实现了
还有一种办法就是
2、通过让.top,.bottom上下两个div都float:left，也可以解决，只不外这样在.container的最后需要增加.clear 块
index.html代码修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变圆环</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="top">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
<div class="bottom">
<!-- 第一个圆环 -->
<div class="colorcircle circle1">
<div class="smallcircle">
</div>
</div>
<!-- 第二个圆环 -->
<div class="colorcircle circle2">
<div class="smallcircle">
</div>
</div>
<div class="clear"> </div>
</div>
<!--假如.top,.bottom都float了，需要加上此行-->
<div class="clear"> </div>
</div>
</body>
</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;
}运转结果为：
结果还是一样的
到此为止，我们就实现了全部的需求
总结：
1、学习了CSS3中线线渐变的语法如
linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
其中标的目的left也可以是right,后面的色彩，可以2个或者3个都可以自定义
但愿本文能给大家带来必然的帮忙，感谢！！！
以上就是CSS3线性渐变实现4圆环相连（代码实例）的具体内容，更多请关注百分百源码网其它相关文章！
