Berapakah jenis kecerunan css3 yang ada?-Soal Jawab bahagian hadapan-php.cn

Berapakah jenis kecerunan css3 yang ada?

青灯夜游

Lepaskan： 2022-03-17 18:09:02

asal

2641 orang telah melayarinya

Terdapat dua jenis kecerunan css3: 1. Kecerunan linear yang dicipta oleh fungsi kecerunan-linear(), yang menukar warna di sepanjang paksi dan melakukan kecerunan berjujukan dari titik permulaan hingga warna akhir; 2. Fungsi jejari-kecerunan() Cipta kecerunan jejarian yang menjadikan kecerunan bulat dari titik mula ke warna titik akhir dari dalam ke luar.

Berapakah jenis kecerunan css3 yang ada?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dua kaedah kecerunan:

Kecerunan Linear: Tukar warna di sepanjang paksi, dari titik permulaan ke warna akhir Kecerunan berjujukan.

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

Salin selepas log masuk

Kecerunan Jejari (Kecerunan Jejari): Dari titik permulaan ke titik akhir, warna melakukan kecerunan bulat dari dalam ke luar.

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

Salin selepas log masuk

Kod sampel:

<!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>

Salin selepas log masuk

Rendering:

1. Kecerunan linear atas dan bawah

Berapakah jenis kecerunan css3 yang ada?

2. Kecerunan linear kiri dan kanan

Berapakah jenis kecerunan css3 yang ada?

3. Kecerunan linear pepenjuru

Berapakah jenis kecerunan css3 yang ada?

4. . Kecerunan Laluan

Berapakah jenis kecerunan css3 yang ada?

(Mempelajari perkongsian video: tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Berapakah jenis kecerunan css3 yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!