CSS3渐变

一、线性渐变

通过background-image: linear-gradient(...)设置线性渐变

语法: linear-gradient(direction,color1,color2, . . )

direction:渐变方向,默认从上到下,可选值:

简单选取:

to right(从左到右)②to left(从右到左)

to top(从下到上) ④ to bottom(从上到下)

组合选取: to right bottom(左上角->右下角)等

角度选取: 45deg(向45度方向渐变)等

案例:

① 设置一个从上到下的粉色向红色的渐变背景

css 复制代码
background-image: linear-gradient(pink, rgba(255, 0, 0, 0.842));

② 设置一个从左上角到右下角的粉色到紫色的渐变背景

css 复制代码
background-image: linear-gradient(to right bottom,pink, rgba(111, 0, 255, 0.842));

二、径向渐变

通过background-image: radial-gradient(...)设置径向渐变

语法:radial-gradient(shape, color1 , color2, . . . )

shape :代表从内向外渐变的形状,默认值为ellipse

可选值有:circle(圆形)、ellipse (椭圆)

案例:

设置一个圆形的径向渐变

css 复制代码
background-image: radial-gradient(circle,white, rgb(223, 18, 162));
相关推荐
浪裡遊1 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
DiXinWang1 小时前
关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法
前端·chrome
CoderYanger1 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
muyouking112 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI2 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
IT_陈寒2 小时前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia2 小时前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia2 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何2 小时前
qiankun知识点
前端