css3漸變方式有哪些

本文小編為大家詳細(xì)介紹“css3漸變方式有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css3漸變方式有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)高唐免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css3漸變有2種：1、linear-gradient()函數(shù)創(chuàng)建的線性漸變，沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變；2、radial-gradient()函數(shù)創(chuàng)建的徑向漸變，從起點(diǎn)到終點(diǎn)顏色從內(nèi)而外沿進(jìn)行圓形漸變。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

兩種漸變方式：

線性漸變（Linear Gradients）：沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變。

background:linear-gradient(direction,color-stop1,color-stop2,……);

徑向漸變（Radial Gradients）：從起點(diǎn)到終點(diǎn)顏色從內(nèi)而外沿進(jìn)行圓形漸變。

background:radial-gradient(center,shape size,start-color,……,last-color);

示例代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #grad1
        {
            width: 200px;
            height: 200px;
            /*background-image: linear-gradient( #b7ffb5, #a880ff);*/
            /*background-image: linear-gradient(to right, #b7ffb5, #a880ff);*/
            /*background-image: linear-gradient(to bottom right, #b7ffb5, #a880ff);*/
            background-image: radial-gradient(#7af0ff, #892aff);
        }
    </style>
</head>
<body>
    <div id="grad1"></div>
</body>
</html>

效果圖：

1.上下線性漸變

css3漸變方式有哪些

2.左右線性漸變

css3漸變方式有哪些

3.對(duì)角線性漸變

css3漸變方式有哪些

4.徑向漸變

css3漸變方式有哪些

讀到這里，這篇“css3漸變方式有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：css3漸變方式有哪些
當(dāng)前鏈接：http://jinyejixie.com/article18/ijgpdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站維護(hù)、面包屑導(dǎo)航、App開發(fā)、、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css3漸變方式有哪些