這篇文章主要為大家詳細介紹了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使用linear-gradient實現線性漸變效果，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
