CSS radial-gradient() 函数详解

CSS 中的 radial-gradient() 函数是一个非常实用的工具，它能帮助我们创建迷人的背景效果。与线性渐变不同，它从中心点（或指定位置）开始，向外辐射色彩。默认情况下，渐变会从元素的中心开始，平滑地过渡到边缘的最终颜色。

通过自定义渐变的 形状、大小、位置和颜色，我们可以设计出更复杂、更有趣的背景。在接下来的内容中，我们将详细探讨 radial-gradient() 函数的工作原理、语法结构，并通过一些示例来帮助大家理解。

语法

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

参数值

该函数接受多个参数，具体列表如下：

• shape：定义渐变的形状，可以是 INLINECODE56447351（圆形）或 INLINECODEbac51cdf（椭圆，默认值）。
• size：定义渐变的大小。选项包括：

– farthest-corner（默认值）

– closest-side

– closest-corner

– farthest-side

• position：定义渐变的起始位置，默认为 center（中心）。
• colors：定义起始颜色、结束颜色以及中间可能存在的任何颜色节点。

下面的示例将向大家展示 CSS 中 radial-gradient() 函数的实际应用：

radial-gradient() 函数示例

示例 1：基础径向渐变

这个例子展示了一个包含三种颜色的径向渐变背景，颜色从深绿色 (#090) 过渡到白色 (#fff)，最后再到更深的绿色 (#2a4f32)。内部的文本进行了居中处理，并使用了不同的字号和字重来突出重点。

    
    
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(#090, #fff, #2a4f32);
        }

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

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    



    

        

            GeeksforGeeks
        
        

            A computer science portal for geeks
        
    

输出结果：

! Basic Radial Gradient output

示例 2：自定义径向渐变

在这个例子中，我们使用圆形径向渐变作为背景，颜色从绿色过渡到白色，最后变为蓝色。文本在垂直和水平方向上均居中，配有粗体标题和较小的副标题，从而创建出具有渐变效果的视觉布局。

    
    
        #main {
            height: 400px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(circle, green, white, blue);
        }

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

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    



    

        

            GeeksforGeeks
        
        

            A computer science portal for geeks
        
    

输出结果：

!Customised Radial Gradient output

CSS 中的 radial-gradient() 函数 为提升网页的视觉吸引力提供了一种多功能且强大的方式。通过掌握其语法和参数，开发者可以创建出动态且响应式的背景效果，从而改善用户体验。无论我们是针对桌面端还是移动端进行设计，radial-gradient() 都能提供实现惊艳视觉效果所需的灵活性。由于所有主流浏览器都支持该功能，我们可以自信地将径向渐变融入到设计中，以确保在不同平台上获得一致且引人入胜的外观。

支持的浏览器

• Google Chrome 5.0
• Edge12
• Mozilla 4.0
• Safari5.0
• Opera11.1