CSS3 渐变

CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3渐变有两种类型:线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。

线性渐变(Linear Gradients):

线性渐变沿着一条直线方向进行渐变。可以通过指定起始点("from")和终止点("to")之间的颜色过渡来创建线性渐变。

语法:

css 复制代码
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

例:

css 复制代码
.div{ background: linear-gradient(red, yellow); }

这个例子会在元素的背景上创建一个从红色到黄色的线性渐变。

径向渐变(Radial Gradients):

径向渐变从一个中心点向外辐射渐变。可以通过指定中心点位置和颜色过渡来创建径向渐变。

语法:

css 复制代码
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

例:

css 复制代码
.div{ background: radial-gradient(circle at center, red, yellow); }

这个例子会在元素的背景上创建一个以中心点为起点,从红色到黄色的径向渐变。

除了简单的过渡效果,还可以在渐变中定义多个颜色和位置,控制渐变的方向、角度和形状,以实现更复杂的效果。

渐变是CSS3提供的强大功能之一,可以为网页添加更丰富的视觉效果,提升用户体验。

相关推荐
徐小夕7 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK2 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S3 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js