Analisis ringkas tentang cara melaksanakan kecerunan linear (linear-gradient) dalam CSS

Bagaimana untuk melaksanakan kecerunan linear dalam CSS? Artikel berikut akan memperkenalkan kepada anda cara menggunakan fungsi kecerunan linear CSS linear-gradient() dan bercakap tentang pelbagai aplikasi kecerunan linear saya harap ia akan membantu semua orang.

linear-gradient

1. >

Kedua-dua ini berbeza dalam penggunaan dan ekspresi apabila menggunakan linear-gradient([[to <direction>|<angle>],]? <color stop>, <color stop>[, ...]?)</color></color></angle></direction>, yang pertama harus disertakan dengan

, manakala yang kedua harus tanpa menggunakan

prestasi adalah tidak konsisten. [Pembelajaran yang disyorkan: -webkit-linear-gradient([[<direction>|<angle>],]? <color stop>, <color stop>[, ...]?)</color></color></angle></direction>tutorial video css

]

directionto1) LalaiangleKedua-dua lalai adalah dari atas ke bawah

2) Penggunaan

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

Dua arah prestasi adalah bertentangan

<direction>: [left|right]|[top|bottom]</direction>

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

3) Penggunaan

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

dan hubungan yang sepadan antara

dan . Arah sepadan <angle></angle> ialah

度数方向-webkit-450°-angle

, jadi kedua-duanya berkelakuan sama, seperti yang ditunjukkan di bawah:

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

450°-175°=275°4) Penggunaan

boleh menggunakan peratusan atau nilai tertentu untuk menunjukkan bahawa warna ini mencapai <color stop> = <color></color></color>

stop饱和Anda boleh melihat proses perubahan warna dari gambar di atas:

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%);

selalu berada dalam keadaan

beransur-ansur menjadi

, pada 0%  --> 10%: #ff1493, 饱和 mencapai

10% --> 40%: #ff1493#000000 beransur-ansur menjadi 40%, pada #000000, 饱和 mencapai

40% --> 60%: #000000#006699 sentiasa dalam 60%#006699饱和Menggunakan ciri ini, anda boleh melukis jalur

60% --> 100%: #006699饱和

Nota:

  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%);

juga boleh set 2 nilai pada masa yang sama, seperti

, kesannya konsisten dengan gambar di atas.

Jika nilai yang terakhir lebih kecil daripada yang pertama, yang pertama akan diguna pakai Seperti yang ditunjukkan di bawah, jika lebih kecil daripada stop, tekan 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%); untuk benar-benar memaparkannya. Kesannya adalah seperti berikut:

20px60px60px

Sambungan 1: Pusat Kecerunan

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

Lalai ialah pusat 2 warna, tetapi kita boleh menetapkan pusat kecerunannya

Nota:

Penggunaan ini tidak disokong

/* 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 Sambungan 2: berulang-linear-gradient

Kita boleh menggunakan atribut untuk melukis blok warna berulang

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

2. Gaya biasa

(1) Langit berbintang pelbagai warna

Tetapkan berbilang nilai pada masa yang sama untuk menjadikan keseluruhan warna latar belakang kelihatan lebih cantik

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) Corak kotak-kotak

Gunakan warna dan warna lutsinar secara berselang-seli render

（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前端）

Atas ialah kandungan terperinci Analisis ringkas tentang cara melaksanakan kecerunan linear (linear-gradient) dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!