CSS-径向渐变-圆形-渐变色调由中心点向四周扩散radial-gradient

需要实现的效果

 代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.colorbg1{
            display:block;
            width: 400rpx;
            height:400rpx;
            border-radius: 100%;
            box-shadow: 0 0 300rpx #e8fefd;
            position: absolute;
            top: 0;
            left:0;
            background-image: radial-gradient(circle,#e8fefd,#fcfdff);
        }
        .colorbg2{
            display:block;
            width: 400rpx;
            height:400rpx;
            border-radius: 100%;
            box-shadow: 0 0 300rpx #d6e8ff;
            position: absolute;
            top: 30%;
            right:0;
            background-image: radial-gradient(circle,#d6e8ff,#fcfdff);
        }
                

  


一、径向渐变

径向渐变(radial-gradient):指从一个中心点开始沿着四周产生渐变效果。

语法:

    background:radial-gradient(起始方向,颜色1,颜色2,…);
    background:-webkit-radial-gradient(left,red,blue);(兼容性)
    background:-webkit-radial-gradient(circle center,red,blue);(方向)

设置形状:

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border-radius: 50%;
            margin: 100px auto;
            background: -webkit-radial-gradient(circle, red, black);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


效果:

 

二、重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border-radius: 50%;
            margin: 100px auto;
            background: repeating-radial-gradient(circle at center, black 0, black 7%, red 7%, red 14%, yellow 14%, yellow 21%, blue 21%, blue 28%, rgb(255, 0, 98) 28%, rgb(255, 0, 98) 35%, rgb(195, 0, 0) 35%, rgb(195, 0, 0) 42%, green 42%, green 49%, yellow 49%, yellow 56%, blue 56%, blue 64%);
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
 
</html>

 
效果:

 

 
备注:径向渐变参考转载于:https://ispacesoft.com/121011.html

 

posted @   MiniDuck  阅读(1043)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
点击右上角即可分享
微信分享提示