源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1577|回复: 0

[CSS/Html] 怎么用CSS+DIV制作背景线性渐变色

[复制链接]

3101

主题

3502

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
270869
发表于 2023-6-4 14:28:18 | 显示全部楼层 |阅读模式

制作网页时,怎么用给DIV填充渐变的背景色呢?



1.新建一个网页文件,在body中添加一个<div></div>标签,然后给他一定CSS样式,【width: 300px;height: 200px;background:#ff0000;】我们可以看到填充了背景色为红色。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. .jianbianse {width: 300px;height: 200px;background:#ff0000;}
  9. -->
  10. </style>
  11. </head>

  12. <body>
  13. <div class="jianbianse"></div>
  14. </body>
  15. </html>
复制代码



2.然后我们添加线性渐变代码【background: -webkit-linear-gradient(left,#ff5000,#ff9000) no-repeat;】,保存并刷新网页后,可以看到背景色已经是渐变色了。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. .jianbianse {width: 300px;height: 200px;background: -webkit-linear-gradient(left,#ff5000,#ff9000) no-repeat;}
  9. -->
  10. </style>
  11. </head>

  12. <body>
  13. <div class="jianbianse"></div>
  14. </body>
  15. </html>
复制代码



3.我们来分析下这段代码的含义,括号中的【left】代表颜色是从左到有的渐变,两个颜色色值【#ff5000,#ff9000】代表从第一个色值渐变到另一个色值。

如果是从上到下渐变,只需要把【left】改成【top】就可以了。

从右向左渐变就是把方向改为【right】

从下向上相信大家也都明白了吧,改成【bottom】就可以啦。

如果我们想让渐变色改成45度斜着渐变,就把方向值改为【45deg】就可以咯,45就是45度,举一反三,想要其他的倾斜度渐变直接改数值就可以了哦。



您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-20 00:21 , Processed in 0.028734 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明