8：渐变(背景-属性)-1.1.4 径向渐变

最新推荐文章于 2021-12-12 10:50:35 发布

liu1992452008

最新推荐文章于 2021-12-12 10:50:35 发布

阅读量394

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/liu1992452008/article/details/75305505

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。

写在最后

关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。

#radial-grad {

margin-top: 50px;

height: 100px;

width: 200px;

background:radial-gradient(circle, red, yellow, green);

}

#radial-grad1 {

margin-top: 50px;

height: 100px;

width: 200px;

/*默认是椭圆的径向*/

background: radial-gradient(ellipse,red 10%, green 30%, blue);

}

*******相应代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            margin-bottom: 30px;
        }
        
        .circle-grad {
            width: 700px;
            height: 500px;
            background: radial-gradient(circle, red, yellow, green);
        }
        
        .ellipse-grad {
            width: 700px;
            height: 500px;
            background: radial-gradient(ellipse, red, yellow, green);
        }
    </style>
</head>

<body>
    <div class="circle-grad"></div>
    <div class="ellipse-grad"></div>
</body>

</html>

*******相应效果