CSS核心(二十)设置背景的线性渐变和径向渐变

[复制链接]
查看: 1404|回复: 31
发表于 2023-1-31 21:47:29 | 显示全部楼层 | 阅读模式
一、线性渐变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景的线性渐变和径向渐变</title>
</head>
<style>
        .box{
                width:500px;
                height:200px;
                /* 线性渐变:background:linear-gradient(to 方向,颜色 color-stop,...) */
                background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);        
        }
</style>
<body>

<div class="box"></div>

</body>
</html>


显示结果如下:

CSS核心(二十)设置背景的线性渐变和径向渐变

二、径向渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景的径向渐变</title>
</head>
<style>
        .box{
                width:300px;
                height:200px;
                background:radial-gradient(circle 100px,red 40%,green 100%);
        }
</style>
<body>
<div class="box"></div>
</body>
</html>


显示效果如下:

CSS核心(二十)设置背景的线性渐变和径向渐变

注意:css中的渐变设置繁琐,功能有限,一般实现渐变都是用图片代替的,这里只做了解即可。


易博软件介绍

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-2-17 07:09:54 | 显示全部楼层
我很不喜欢你发帖子的风格    看了让人眼花!!    不要一行写几个字    另一行又写很长    看起来真的很不方便

0

主题

19

帖子

10

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
10
发表于 2023-2-24 02:20:34 | 显示全部楼层
感觉得自己很愚昧,自认为自己还不错,原来我差劲得要命,多谢你的提醒.

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-2-28 02:53:14 | 显示全部楼层
努力也

0

主题

13

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-7 09:41:10 | 显示全部楼层
不错,真的不错,很受感悟,让计算机执行更少的指令完成更多的工作,才是我所愿~

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-3-12 20:31:51 | 显示全部楼层
……  看来务实很重要……
发表于 2023-3-18 11:31:57 | 显示全部楼层
深有感触!深有感触!
发表于 2023-3-23 09:15:31 | 显示全部楼层
真的很受启发,但是很多时候只是为了赶进度,只能拿最拿手的最快的办法来写了
发表于 2023-3-28 00:01:15 | 显示全部楼层
不错看了感触极深  非常感谢希望可以跟你交个朋友  我是个新手,现在突然发现自己很喜欢这一行,决心要发展下去

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-30 18:37:27 | 显示全部楼层
好贴! 支持!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|Archiver|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表