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)由右向左渐变

相关推荐
我命由我123455 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
feixing_fx8 天前
伪类与伪元素的魔法:纯 CSS 打造炫酷的按钮悬停特效
前端·css·css3
無限進步D11 天前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
無限進步D11 天前
VSCode 简介+安装+JavaWeb前端常用插件+简单配置
java·开发语言·css·vscode·html·css3·插件
linsk199814 天前
妙用:focus解决0到auto高度过渡的边界场景
css3
EatFan16 天前
HTML前端利用flex解决input定位的问题
前端·css·html·css3
平头哥~17 天前
Day 20 _ 3D 翻卡_perspective 写错人,卡片就穿帮
前端·3d·css3·学习资料
平头哥~18 天前
Day 21 | animation 与 keyframes:把动画从 A 到 B 变成多点编排
前端·css·css3·css学习
toooooop818 天前
智慧文旅数字人体验平台demo html
css·css3
神膘护体小月半18 天前
mask 渐变遮罩属性
前端·css·css3