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

相关推荐
患得患失9492 天前
【ThreeJs】【HTML载入】Three.js 中的 CSS2DRenderer 与 CSS3DRenderer 全面解析
javascript·html·css3
少年阿闯~~11 天前
CSS3的新特性
前端·javascript·css3
恶猫12 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
degree52012 天前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
BillKu13 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
乖女子@@@14 天前
css3新增-网格Grid布局
前端·css·css3
BUG创建者15 天前
html获取16个随机颜色并不重复
css·html·css3
不爱编程的小方15 天前
响应式布局
前端·css3
Async Cipher15 天前
CSS 居中
前端·css·css3
咔咔一顿操作15 天前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3