淺析CSS中怎麼實現線性漸變（linear-gradient）

CSS中怎麼實現線性漸層？以下這篇文章跟大家介紹一下CSS線性漸變函數linear-gradient()的使用方法，並聊聊線性漸層的多種應用，希望對大家有幫助！

linear-gradient

#1.語法

linear- gradient([[to <direction>|<angle>],]? <color stop>, <color stop>[, ...]?)</color></color></angle></direction>

#-webkit-linear-gradient([[<direction>|<angle>],]? <color stop>, <color stop>[, ...]?)</color></color></angle></direction>

這2種在使用方式和表現形式上都有所不同，使用direction時，前者要帶to, 後者不帶；使用angle時，表現不一致。 【推薦學習：css影片教學】

1）預設

二者預設都是從上到下

background-image:linear-gradient(#00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)

2）<direction>: [left|right]|[top|bottom]</direction>的使用

二者表現方向相反

background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);

background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);

#3）<angle></angle>的使用

度數與方向的對應關係。 -webkit-對應的方向則為450°-angle

background-image:linear-gradient(275deg, #ff1493, #000000, #006699);
background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);

450°-175° =275°，所以二者表現一致，如下圖：

4）<color stop> = <color></color></color>的使用

stop可使用百分比，也可以使用特定值，表示這種顏色在此位置達到飽和

background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);

從上圖可以看出顏色變化過程：

0%  --> 10%: #ff1493一直處於飽和

10% --> 40%: #ff1493漸變為#000000, 在40%處，#000000達到飽和

#40% --> 60%: #000000漸變為#006699 , 在60%處，#006699達到飽和

60% --> 100%: # 006699一直處於飽和

利用此特性，可以畫出條紋

  background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
  background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);

##註：stop也可以同時設定2個值， 如linear-gradient(to right, #ff1493 0% 33%, #000000 33% 66%, #006699 66% 100%);-webkit- linear-gradient(to right, #ff1493 33%, #000000 33% 66%, #006699 66% 100%);，效果與上圖一致。

若後者的值小於前者，以前者為準，如下

20px小於60px，實際按60px顯示，效果如下圖：

background-image:linear-gradient(right, #ff1493 60px, #000000 20px);
background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);

擴充1：漸層中心

預設是2種顏色的中心，但我們可以設定其漸層中心

/* 3种颜色平分，渐变中心为1/3和2/3处 */
background-image:linear-gradient(to right, #ff1493, #000000, #006699); 
/* 渐变中心在10%和20%处 */
background-image:linear-gradient(to right, #ff1493, 10%, #000000, 20%, #006699);

註：-webkit-linear-gradient不支援此用法

擴充2: repeating-linear-gradient

我們可以使用屬性這個來繪製重複的色塊

background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px);
background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)

2.常用樣式

######（1）多色星空######

background-image:
    linear-gradient(45deg, rgba(255, 0, 76, 0.7), rgba(0, 0, 255, 0) 80%),
    linear-gradient(135deg, rgba(106, 0, 128, 1), rgba(0, 128, 0, 0) 80%),
    linear-gradient(225deg, rgba(0, 255, 255, 1), rgba(0, 255, 255, 0) 80%),
    linear-gradient(315deg, rgba(255, 192, 203, 0.7), rgba(255, 192, 203, 0) 80%);

###同時設定多個值，讓整個背景色看起來比較絢麗# #################（2）格紋圖案######

background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
    
background-image:
    repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);

###利用色彩與透明色交替渲染########### #

（3）边框渐变

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    height: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
}

</style>

内部背景透明，但是不支持设置border-radius

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    height: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
    clip-path: inset(0 round 5px);
}

</style>

注：可以使用clip-path裁剪出圆角, 但是这种方式不适用于角度较大的圆角

<div id="wrap">
    <div id="content"></div>
</div>
<style>
#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
}

#wrap::before {
    content: &#39;&#39;;
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    border-radius: 25px;
    z-index: -1
}

/*或者*/

#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
    border: 5px solid transparent;
    background-origin: border-box;
    background-image: linear-gradient(#FFF, #FFF), linear-gradient(45deg, aqua, pink, purple);
    background-clip: padding-box, border-box;
}

/*或者*/

#wrap {
    width: 180px;
    height: 50px;
    border: 5px solid transparent;
    border-radius: 25px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    background-origin: border-box;
}

#content {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
}

</style>

这几种方式都能做到圆角渐变边框，但是无法做到内部背景透明

（4）文字渐变

<div id="wrap"> Darker CMJ</div>
<style>
#wrap {
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    // color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, aqua, pink, purple);
}
</style>

background-clip规定背景的绘制区域，我们设置其值为text，就是在文字区域绘制，然后将文字color或者-webkit-text-fill-color设置为透明色，渐变区域就能显示出来了

好了，over，第一次写文章，希望能坚持下去=.=

（学习视频分享：web前端）

以上是淺析CSS中怎麼實現線性漸變（linear-gradient）的詳細內容。更多資訊請關注PHP中文網其他相關文章！