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

相关推荐
‘’林花谢了春红‘’11 天前
小玩意 生日快乐
css·html·css3
志尊宝20 天前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
More more20 天前
纯手搓css样式:科技感弹窗边框
css·科技·css3
丨我是张先生丨21 天前
英语单词 Web Page
前端·css·css3
丨我是张先生丨23 天前
日语单词 Web Page
前端·css·css3
AI视觉网奇1 个月前
three教学 3d资产拼接源代码
前端·css·css3
神明不懂浪漫1 个月前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
智码看视界1 个月前
老梁聊全栈:CSS3 高级特性—Flex/Grid 布局体系深度解析
前端·css3·布局·flexbox·grid·工程实践·全栈工程师
gz-郭小敏1 个月前
优化横向滚动展示大量数据的时候数据晃动问题
前端·javascript·html·css3
贩卖黄昏的熊2 个月前
flex 布局快速梳理
开发语言·javascript·css3·html5