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

相关推荐
小J听不清2 天前
CSS 外边距(margin)全解析:取值规则 + 实战用法
前端·javascript·css·html·css3
小J听不清2 天前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3
小J听不清2 天前
CSS 内边距(padding)全解析:取值规则 + 表格实战
前端·javascript·css·html·css3
小J听不清3 天前
CSS 字体样式全解析:字体类型 / 大小 / 粗细 / 样式
前端·javascript·css·html·css3
小J听不清3 天前
CSS 三种引入方式全解析:行内 / 内部 / 外部样式表(附优先级规则)
前端·javascript·css·html·css3
小J听不清3 天前
CSS 浮动(float)全解析:布局 / 文字环绕 / 清除浮动
前端·javascript·css·html·css3
小J听不清3 天前
CSS 文本样式全解析:颜色 / 对齐 / 装饰 / 缩进
前端·javascript·css·html·css3
读忆3 天前
解决 `:first-child` / `:last-child` 不生效的问题
前端·css·vue.js·css3
小J听不清3 天前
CSS 文本对齐方式实战:text-align 核心用法
前端·javascript·css·html·css3
小J听不清3 天前
CSS display 属性全解析:块级 / 行内 / 行内块 / 隐藏
前端·javascript·css·html·css3