如何使用CSS3中的设置背景图片属性控制背景渐变

2026-04-15 19:04:17

1、第一步,在已新建的Web项目中创建HTML5页面,并在<body></body>插入语一个div标签,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

如何使用CSS3中的设置背景图片属性控制背景渐变

2、第二步,由于div标签设置了class属性,使用这个属性选择器设置div标签的样式,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

3、第三步,使用HBuilder中自带的浏览器预览工具图标,查看页面效果,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

4、第四步,再使用类选择器,设置background-image属性linear-gradient,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

5、第五步,刷新浏览器,可以看到div标签显示的页面出现颜色渐变,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

6、第六步,最后给div添加border-radius属性,修改字体大小属性,然后再次查看效果,如下图所示:

如何使用CSS3中的设置背景图片属性控制背景渐变

猜你喜欢