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提供的强大功能之一,可以为网页添加更丰富的视觉效果,提升用户体验。

相关推荐
可观测性用观测云几秒前
前端错误可观测最佳实践
前端
恋猫de小郭1 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
小帆聊前端12 分钟前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
一枚前端小能手22 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码22 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA929 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登29 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多30 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus32 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom34 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试