css3 背景色渐变

在 CSS 中,使用渐变色需要用到 gradient 属性,而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient 。今天主要是说一下linear-gradient 线性渐变属性。

例如:background: linear-gradient(90deg, #e7f1fc, #f5f9fb);

|----------|------------|--------------|---------------|-------------|
| 渐变角度 | 0deg | 90deg | 180deg | 270deg |
| 渐变方向 | to top | to right | to bottom | to left |

一、 0deg演示(相当于to top)由下向上渐变

二、 90deg演示(相当于to right)由左向右渐变

三、180deg演示(相当于to bottom)由上向下渐变

四、 270deg演示(相当于to left)由右向左渐变

相关推荐
keyipatience2 天前
CSS学习(2)|元素显示模式、盒模型、Flex 布局
javascript·css·html·css3
溪语流沙4 天前
【Web全栈进阶】Vue3起步:组件、模板语法、响应式数据
前端·javascript·vue.js·css3
百度一下吧4 天前
CSS3 之后新增的特性:从 CSS4 到现代 CSS 的演进
前端·css·css3
tryCbest4 天前
第二篇:CSS3 全部知识点全解 + 项目样式实现
前端·css·css3
溪语流沙7 天前
【每天一个CSS | Day18】会摆动的拟物怀表:黄铜、皮革与催眠摆
前端·css3·html5
传人once7 天前
选择文件按钮样式如何美化
前端·html·css3·jquery·html5
我命由我123451 个月前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
feixing_fx1 个月前
伪类与伪元素的魔法:纯 CSS 打造炫酷的按钮悬停特效
前端·css·css3
無限進步D1 个月前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
無限進步D1 个月前
VSCode 简介+安装+JavaWeb前端常用插件+简单配置
java·开发语言·css·vscode·html·css3·插件