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

相关推荐
行走的陀螺仪3 小时前
重绘和重排怎么触发?怎么优化?
前端·css·性能优化·css3·浏览器原理
暴富暴富暴富啦啦啦19 小时前
声音波浪 js+css
css·html·css3
旧梦吟1 天前
脚本 手机跑.简易go服务器
python·golang·css3
滴滴答答哒2 天前
Quartz Cron 表达式参考表
前端·css·css3
凌波粒2 天前
CSS基础详解(2)--Grid网格布局详解
前端·css·css3·html5
by__csdn3 天前
Vue3 大文件分片上传完整指南:图片/视频附件高效传输方案
前端·javascript·vue.js·typescript·vue·css3·html5
by__csdn4 天前
Vue.js 生命周期全解析:从创建到销毁的完整指南
前端·javascript·vue.js·前端框架·ecmascript·css3·html5
BUG创建者4 天前
thee.js完成线上展厅demo
开发语言·前端·javascript·css·html·css3·three.js
西洼工作室5 天前
移动开发常见问题
前端·css3·web移动开发
韩曙亮5 天前
【Web APIs】元素可视区 client 系列属性 ( client 属性简介 | 常用的 client 属性 | 使用场景 | 代码示例 )
前端·javascript·css·css3·bom·client·web apis