CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果

發(fā)布時(shí)間：2020-06-09 12:07:08 來(lái)源：億速云閱讀：473 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章主要為大家詳細(xì)介紹了CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果的方法，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門(mén)，感興趣的小伙伴們可以參考一下。

問(wèn)題：

要求實(shí)現(xiàn)以下效果，使用純DIV+CSS，必須使用知識(shí)點(diǎn) 線(xiàn)性漸變（linear-gradient）,且居中顯示

附加說(shuō)明：

1、一個(gè)彩色圓環(huán)的大小是400px*400px,里面空白圓環(huán)大小為260px*260px

2、右邊圓環(huán)和左邊圓環(huán)的左移距離為120px

3、下邊圓環(huán)和上邊圓環(huán)的上移距離為20px

思路分析：

1、最外層是一個(gè)綠色邊框的div，里面包裹著4個(gè)圓環(huán)

2、div分上下兩部分，兩部分其實(shí)都是一樣的，只要實(shí)現(xiàn)了上面部分，下面部分其實(shí)是可以拷貝，只是margin-top要更改一下

3、每個(gè)圓環(huán)其實(shí)都是一樣，只是位置不同，所以只要把一個(gè)漸變圓環(huán)實(shí)現(xiàn)出來(lái)，其他所有的圓環(huán)都可以復(fù)制第一個(gè)圓環(huán)

現(xiàn)在來(lái)具體操作

1、創(chuàng)建好index.html，寫(xiě)好架構(gòu)

架構(gòu)思路：

1、外層容器我們就叫做.container容器，里面分成.top,.bottom兩部分，每個(gè)部分里面包含兩個(gè)圓環(huán)div,

并行的兩個(gè)div圓環(huán)，因?yàn)橐脚帕?，所以肯定需要float，既然float，了，在容器的最后需要加上一個(gè).clear的div，清除浮動(dòng)，這樣可以讓容器依然包裹住兩個(gè)float的圓環(huán)div

2、每個(gè)圓環(huán)其實(shí)也是由兩個(gè)部分組成，一個(gè)外層彩色圓環(huán)和內(nèi)層一個(gè)白色的小的圓環(huán)

根據(jù)分析得出以下架構(gòu)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漸變圓環(huán)</title>
  
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一個(gè)圓環(huán) -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二個(gè)圓環(huán) -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bottom">
            <!-- 第一個(gè)圓環(huán) -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二個(gè)圓環(huán) -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear">&nbsp;</div>
       </div>
    </div>
</body>
</html>

2、接下來(lái)，寫(xiě)樣式

1、創(chuàng)建css文件夾，方便管理所有的css文件，創(chuàng)建index.css，里面的樣式怎么寫(xiě)呢，思路如下：

1、.container *

思路分析

1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫(xiě)入.container * 樣式內(nèi)

所以index.css中添加代碼如下：

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

2、外層彩色圓環(huán).colorcircle

思路分析

1、根據(jù)要求得知，width:400px,height:400px,因?yàn)槭菆A形的，所以需要設(shè)置邊框圓角為400px即border-radius: 400px;，

2、因?yàn)楸尘笆瞧卟噬?，所以需要用到線(xiàn)線(xiàn)漸變，而且顏色漸變從左到右依次是紅橙黃綠青藍(lán)紫，所以轉(zhuǎn)成代碼即background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

3、然后用到了圓角，需要設(shè)置border,否則不會(huì)生效，但是它的邊框是透明的，所以轉(zhuǎn)成代碼即border:1px solid transparent;

4、為了確保圓環(huán)并行排列，所以需要讓它float:left

根據(jù)分析，繼續(xù)在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、圓環(huán)內(nèi)層白色小圓環(huán) .smallcircle

思路分析：

1、根據(jù)要求得知，width: 260px，height:260px,因?yàn)槭菆A形的，所以需要設(shè)置邊框圓角為260px即border-radius: 260px;，背景白色background-color: white;

因?yàn)橐又校运淖箝g距，上間距為70px=(400-260)/2

2、然后用到了圓角，需要設(shè)置border,否則不會(huì)生效，但是它的邊框是透明的，所以轉(zhuǎn)成代碼即border:1px solid transparent;

繼續(xù)index.css中添加代碼如下：

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

4、.clear樣式

思路分析：

1、需要清除浮動(dòng)，所以需要float:none,clear:both

2、這種div里面沒(méi)有內(nèi)容，為了不影響布局，需要設(shè)置width,height都為0

繼續(xù)index.css中添加代碼如下：

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

5、右邊圓環(huán).circle2

思路分析:

1、根據(jù)要求得知，左移量為120px,所以margin-left:-120px

繼續(xù)index.css中添加代碼如下：

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

6、下面部分.bottom

思路分析：

1、根據(jù)要求得知，上移量為20px,所以margin-top:-20px

繼續(xù)index.css中添加代碼如下：

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

7、最外層.container

思路分析

1、因?yàn)檎w要居中，所以轉(zhuǎn)成代碼即 margin:0 auto;因?yàn)槭蔷G色邊框所以 border:1px solid green;

2、div默認(rèn)寬度是100%，為了讓它居中，需要設(shè)置寬才可以，width=684px(400+400+4【圓環(huán)4個(gè)border】-120),高度=784(400+400+4【圓環(huán)4個(gè)border】-20)

繼續(xù)index.css中添加代碼如下：

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

到此為止，index.css所有內(nèi)容如下：

.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>漸變圓環(huán)</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一個(gè)圓環(huán) -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二個(gè)圓環(huán) -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bottom">
            <!-- 第一個(gè)圓環(huán) -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二個(gè)圓環(huán) -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear">&nbsp;</div>
       </div>
    </div>
</body>
</html>

運(yùn)行結(jié)果如下：

CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果

發(fā)現(xiàn)下面部分.bottom的margin-top好像失效了，其實(shí)如果我們將.bottom的border設(shè)置成紅色，可以看出，其實(shí)也是上移了20px，但是因?yàn)槔锩鎴A環(huán)是float的，且默認(rèn)的postion為relative,所以圓環(huán)是無(wú)法再上移的，怎么辦呢？這里提供兩種解決方案：

1、我們將.bottom的postion設(shè)置為absoute

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

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

我們?cè)賮?lái)運(yùn)行效果：

CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果

我們發(fā)現(xiàn)效果實(shí)現(xiàn)了

還有一種方法就是

2、通過(guò)讓.top,.bottom上下兩個(gè)div都float:left，也可以解決，只不過(guò)這樣在.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>漸變圓環(huán)</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一個(gè)圓環(huán) -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二個(gè)圓環(huán) -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bottom">
            <!-- 第一個(gè)圓環(huán) -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二個(gè)圓環(huán) -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear">&nbsp;</div>
       </div>
       <!--如果.top,.bottom都float了，需要加上此行-->
       <div class="clear">&nbsp;</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;
}

/* 解決上移問(wèn)題 */
.bottom{
    margin-top:-20px; 
    float: left;
}
.top{
    float: left;
}
/* end */
.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

運(yùn)行結(jié)果為：

CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果

效果還是一樣的

總結(jié)：

1、學(xué)習(xí)了CSS3中線(xiàn)線(xiàn)漸變的語(yǔ)法如

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

其中方向left也可以是right,后面的顏色，可以2個(gè)或者3個(gè)都可以自定義

關(guān)于CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

CSS3使用linear-gradient實(shí)現(xiàn)線(xiàn)性漸變效果

問(wèn)題：

思路分析：

總結(jié)：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽