天涯论坛

 找回密码
 立即注册
搜索
查看: 112|回复: 6

聊一聊CSS3的渐变——gradient

[复制链接]

3138

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968624
发表于 2024-6-30 08:20:00 | 显示全部楼层 |阅读模式

关于渐变

时下,渐变(gradient)效果在页面设计中已然变得越来越平常了。况且此刻的CSS3针对渐变的支持已然足够的丰富了。虽然咱们可能运用过CSS3中的line-gradient属性或radial-gradient属性,但其实CSS3中的渐变功能比咱们想象的要强大的多,加以利用会实现非常多有趣好玩的东西。本文就来讨论CSS3中的渐变。

taobao首页的按钮和导航栏都运用了css渐变

基本语法

倘若你之前运用过CSS3的渐变,针对下面的CSS代码必定有所认识

<div class="gradient_bg"> </div> <style> .gradient_bg { bac公斤round-image: linear-gradient(gold, #FF837E); height: 84px; width: 100%; } </style>

他的运行结果如下:

这是一个由上到下、由金色到粉色的渐变色块

linear-gradient()办法的语法看上去还是很清晰的——从某个颜色渐变到另一个颜色。

然则倘若要实现下面的几种渐变效果该怎样做呢?

这个是由于左到右渐变的色块,并且渐变过程只出现在中间一小部分内
这个是由于中心向外渐变的色块




上一篇:CSS 样式怎么样实现背景渐变过渡效果?
下一篇:CSS 三大特性
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-29 12:50:00 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-3 16:17:15 | 显示全部楼层
你的话语如春风拂面,温暖了我的心房,真的很感谢。
回复

使用道具 举报

3138

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968624
 楼主| 发表于 2024-10-7 11:44:36 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-10-20 08:24:56 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-29 05:14:14 | 显示全部楼层
真情实感,其含义为认真了、走心了的意思,是如今的饭圈常用语。
回复

使用道具 举报

3048

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109040
发表于 昨天 21:58 | 显示全部楼层
你的见解独到,让我受益匪浅,期待更多交流。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 00:57 , Processed in 0.133933 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.