Tidadigi Logo

CSS repeating-radial-gradient() Function

Hàm repeating-radial-gradient() là một hàm dựng sẵn trong CSS. Nó được sử dụng để lặp lại các radial gradient.

Cú pháp: 

background-image: repeating-radial-gradient(shape size at position, 
start-color, ..., last-color);

Tham số: Hàm này chấp nhận nhiều tham số được liệt kê bên dưới: 

  • shape: Tham số này dùng để xác định hình dạng của gradient. Nó có hai giá trị có thể là hình tròn hoặc hình elip. Giá trị hình dạng mặc định là hình elip.
  • size: Tham số này dùng để xác định kích thước của gradient. Các giá trị có thể là: farthest-corner (mặc định), closest-side, closest-corner, farthest-side.
  • position: Tham số này dùng để xác định vị trí của gradient. Giá trị mặc định là ở giữa.
  • start-color, ..., last-color: Tham số này dùng để giữ giá trị màu sắc. Tiếp theo là vị trí dừng tùy chọn của nó.

Ví dụ dưới đây minh họa hàm repeating-radial-gradient() trong CSS:

Ví dụ: Trong ví dụ này, phần tử #main áp dụng radial gradient lặp lại từ xanh dương sang trắng sang xanh lá.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image: repeating-radial-gradient(blue,
                    white 10%, green 15%)
        }

        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Output: 

css-repeating-radial-gradient-function

Ví dụ 2: Trong ví dụ này, phần tử #main áp dụng radial gradient lặp lại hình tròn. Màu sắc chuyển từ xanh dương sang trắng sang xanh lá.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 400px;
            width: 400px;
            background-color: white;
            background-image: repeating-radial-gradient(circle,
                    blue, white 10%, green 15%)
        }

        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 170px;
        }

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Output: 

css-repeating-radial-gradient-function

Trình duyệt được hỗ trợ:

  • Google Chrome 26
  • Edge 12
  • Microsoft Edge 12
  • Firefox 16
  • Opera 12.1
  • Safari 7

Last Updated : 21/07/2025