如何使用CSS3属性实现圆形径向渐变

2025-04-02 23:28:36

1、第一步，双击打开HBuilder，新建静态页面gradient.html；并在<body></body>插入div标签元素，设置id属性值为“gradient”，如下图所示：

2、第二步，设置id属性值为“gradient”的div标签元素的样式，高度和宽度为500px，半径为500px，设置兼容各个浏览器的radial-gradient，第一个参数为“circle”，如下图所示：

3、第三步，保存代码并预览该静态页面，查看页面效果，如下图所示：

4、第四步，再次添加一个div标签，修改id属性值为gradient2，并设置对应的radial-gradient，这时第一个参数为“ellipse”，如下图所示：

5、第五步，再次保存页面并预览该静态页面，可以看到圆形下方有个椭圆形，如下图所示：

6、第六步，再次修改椭圆形的样式，让下方的图形更像椭圆形，如下图所示：

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。