css零到一高级教程006：CSS 径向渐变

慕容屠苏

已于 2022-03-26 10:48:30 修改

阅读量417

点赞数

分类专栏： css零到一文章标签： css html 前端

于 2022-03-26 10:47:25 首次发布

本文链接：https://blog.csdn.net/kerryqpw/article/details/123751879

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了CSS中的径向渐变，包括语法、设置形状、大小关键字的应用及重复径向渐变，并通过实例展示了如何创建和控制径向渐变效果。同时，列举了重要的CSS渐变属性。

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

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法

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

默认地，shape 为椭圆形，size 为最远角，position 为中心。

径向渐变-均匀间隔的色标（默认）

下面的例子展示了带有均匀间隔的色标的径向渐变：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>径向渐变 - 均匀间隔的色标</h1>

<div id="grad1"></div>

</body>
</htm

了解本专栏