溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中l(wèi)inear-gradient()函數(shù)有什么用

發(fā)布時(shí)間：2020-10-22 15:42:59 來(lái)源：億速云 閱讀：150 作者：小新 欄目：web開(kāi)發(fā)

css中l(wèi)inear-gradient()函數(shù)有什么用？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

一、css linear-gradient()是什么？

1.定義

css linear-gradient函數(shù)，用于創(chuàng)建一個(gè)線性漸變的 "圖像"。

2.用法

為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過(guò)渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

例（指定3種終止色）：

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 標(biāo)準(zhǔn)語(yǔ)法 */

效果圖：

css中l(wèi)inear-gradient()函數(shù)有什么用

例子里沒(méi)有指定一個(gè)方向來(lái)實(shí)現(xiàn)線性漸變，因此是默認(rèn)的從上而下來(lái)實(shí)現(xiàn)效果，也可以指定一個(gè)方向（角度）來(lái)實(shí)現(xiàn)效果，例：

指定一個(gè)方向（從左往右）：

background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to right,red,yellow,blue);/* 標(biāo)準(zhǔn)語(yǔ)法 */

css中l(wèi)inear-gradient()函數(shù)有什么用

指定一個(gè)方向（45度角）：

background: linear-gradient(45deg,red,yellow,blue); /* 標(biāo)準(zhǔn)語(yǔ)法 */

css中l(wèi)inear-gradient()函數(shù)有什么用

同時(shí)，也可以實(shí)現(xiàn)漸變透明的效果（定義一個(gè)透明度）：

background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/

css中l(wèi)inear-gradient()函數(shù)有什么用

二、css設(shè)置 線性漸變的圓形邊框（代碼）

原理：

先制作兩個(gè)的正方形，大小不一，疊加在一起

css中l(wèi)inear-gradient()函數(shù)有什么用

使用邊框圓角屬性：border-radius設(shè)置邊框的圓角度為100%

css中l(wèi)inear-gradient()函數(shù)有什么用

在使用linear-gradient()添加外圍圓形的漸變色，就制作成了：

css中l(wèi)inear-gradient()函數(shù)有什么用

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>邊框漸變的圓形</title>
        <style>

            .border1{
                width: 200px;
                height: 200px;
                margin:100px auto;

                position: relative;
                border: 1px solid transparent;
                border-radius: 100%;
                background: white;
                background-clip: padding-box;
                padding: 10px;
            }
            .border1::after{
                position: absolute;
                top: -40px; 
                bottom: -40px;
                left: -40px;
                right: -40px;
                background: linear-gradient(45deg,red, blue);
                content: '';
                z-index: -1;
                border-radius: 100%;
            }
        </style>
    </head>
    <body>    
        <div class="border1"></div>
    </body>
</html>

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css中l(wèi)inear-gradient()函數(shù)有什么用大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手