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

相关推荐
芒果茶叶5 分钟前
深入浅出requestAnimationFrame
前端·javascript·html
歪歪1007 分钟前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
亲爱的马哥9 分钟前
再见,TDuckX3.0 结束了
前端·后端·github
KrystalMeiling22 分钟前
讲解react的useEffect用法,被监听字段的注意事项
前端
渣哥26 分钟前
Spring 创建 Bean 的多种方式对比与最佳实践
前端·javascript·面试
Copper peas30 分钟前
axios使用过程
前端·javascript·vue.js
云鹤_35 分钟前
【Amis源码阅读】如何将json配置渲染成页面?
前端·低代码
逛逛GitHub38 分钟前
飞书多维表格 + 即梦 4.0,打造你的 AI 生图游乐场。
前端·github
行走在顶尖43 分钟前
Vue3 基础笔记
前端
guoss1 小时前
实现渐变背景叠加渐变圆角边框
前端