首页 > 软件开发 > HTML >

CSS怎么设置渐变背景效果

来源:互联网 2023-03-16 19:17:39 279

我在网页开发的过程中,经常会用到CSS来添加样式,制作渐变颜色的背景!下面小编就将方法分享给大家,供大家参考学习!(如果你不在乎过程,请直接复制演示代码修改)MXC办公区 - 实用经验教程分享!

CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

工具/原料

  • 开发工具:HBuilder
  • 技术:HTML5、CSS3

方法/步骤

  • 1

    首先打开工具,新建一个HTML文档!MXC办公区 - 实用经验教程分享!

    CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

  • 2

    创建一个div盒子,并添加基本样式(以DIV为大家演示)MXC办公区 - 实用经验教程分享!

    CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

  • 2本页面未经许可获取自百度经验
  • 3

    添加线性渐变效果:MXC办公区 - 实用经验教程分享!

    语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);MXC办公区 - 实用经验教程分享!

    演示代码:background-image: linear-gradient(to right, red , yellow);MXC办公区 - 实用经验教程分享!

    CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

  • 4

    添加径向渐变效果:MXC办公区 - 实用经验教程分享!

    语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);MXC办公区 - 实用经验教程分享!

    演示代码:background-image: radial-gradient(circle, red, yellow, green);MXC办公区 - 实用经验教程分享!

    CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

  • 5

    最后,我打开浏览器来看看效果吧!MXC办公区 - 实用经验教程分享!

    CSS怎么设置渐变背景效果MXC办公区 - 实用经验教程分享!

  • 注意事项

    • 1、如果你想直接用,请复制演示代码,修改颜色值就可以了!
    • 2、本教程主要介绍了,线性渐变,和径向渐变!详细参数打开可以去W3C手册查询!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!MXC办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码