web前端入门到实战：10个demo示例学会CSS3 radial-gradient径向渐变

最新推荐文章于 2024-08-29 22:00:39 发布

魔方编程

最新推荐文章于 2024-08-29 22:00:39 发布

阅读量367

点赞数

文章标签： css web前端前端开发前端工程师前端基础

本文链接：https://blog.csdn.net/wewfdf/article/details/99613641

版权

本文介绍了web前端中CSS3的径向渐变radial-gradient，通过10个实际示例详细解析了如何使用和配置径向渐变，包括基础用法、圆形渐变、指定起点、终止点、颜色断点、椭圆渐变、累加效果、尺寸控制、重复渐变和边框应用等。

摘要由CSDN通过智能技术生成

一、语法细节记不住怎么办？
实际开发的时候，当要使用radial-gradient径向渐变的时候，脑中会有大概的语法，但是细节却记不住，于是想快捷找个案例看看具体怎么用，然后直接套一下。通常一番搜索，会发现虽然是个简单需求，但是正好满足这个需求的页面却不好找，乱糟糟的。

下次遇到这种场景，直接来本站搜“径向渐变”，或者直接搜索“渐变”，就有专门展示radial-gradient径向渐变基本语法使用案例的文章。文章共展示了10例常见使用案例，相信一定可以覆盖你的使用场景的。

首先，假设我们使用同一段HTML作为示意：

<div class="radial-gradient"></div>

二、示例1：最基础最简单使用

CSS如下：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(yellow, red);
}

最终效果如下图：

可见，对于径向渐变，在不指定渐变类型以及位置的情况下，其渐变距离和位置是由容器的尺寸决定的。

例如本例之中，容器的宽高比是2:1，最终渐变呈现出来的形状也是一个2:1的椭圆形，并且渐变颜色自动终止与容器的边缘。

原理示意如下：

三、示例2：简单的圆形渐变
CSS代码如下：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(circle, yellow, red);
}

其渐变范围（渐变结束线）示意如下图，会发现既不是按照宽度来的，也不是按照高度来的，是按照最远边角距离作为渐变结束线的：

要证明上面结论比较简单，我们可以计算下对角线一

关注