CSS3線性漸層實作4個圓環相連（程式碼實例）-css教學-PHP中文網

本文目標：

問題：

思路分析：

总结：

首頁

web前端

css教學

CSS3線性漸層實作4個圓環相連（程式碼實例）

易达

Jun 05, 2020 am 11:02 AM

css3

本文目標：

1、掌握CSS3中線性漸變（linear-gradient）的實作方法

問題：

要求實現以下效果，使用純DIV CSS ，必須使用知識點線性漸變（linear-gradient）,且居中顯示

CSS3線性漸層實作4個圓環相連（程式碼實例）

附加說明：

#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;

#因為要居中，所以要居中，所以背景白色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>

登入後複製

運行結果如下：

CSS3線性漸層實作4個圓環相連（程式碼實例）

####

发现下面部分.bottom的margin-top好像失效了，其实如果我们将.bottom的border设置成红色，可以看出，其实也是上移了20px，但是因为里面圆环是float的，且默认的postion为relative,所以圆环是无法再上移的，怎么办呢？这里提供两种解决方案：

1、我们将.bottom的postion设置为absoute

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

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

登入後複製

我们再来运行效果：

CSS3線性漸層實作4個圓環相連（程式碼實例）

我们发现效果实现了

还有一种方法就是

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;
}

登入後複製

运行结果为：

CSS3線性漸層實作4個圓環相連（程式碼實例）