Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Berapakah jenis kecerunan css3 yang ada?

Berapakah jenis kecerunan css3 yang ada?

青灯夜游
Lepaskan: 2022-03-17 18:09:02
asal
2669 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan