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

相关推荐
呼噜想睡觉12 天前
Flex弹性布局
css·html·css3
a11177618 天前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
‘’林花谢了春红‘’1 个月前
小玩意 生日快乐
css·html·css3
志尊宝1 个月前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
More more1 个月前
纯手搓css样式:科技感弹窗边框
css·科技·css3
丨我是张先生丨1 个月前
英语单词 Web Page
前端·css·css3
丨我是张先生丨1 个月前
日语单词 Web Page
前端·css·css3
AI视觉网奇2 个月前
three教学 3d资产拼接源代码
前端·css·css3
神明不懂浪漫2 个月前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
智码看视界2 个月前
老梁聊全栈:CSS3 高级特性—Flex/Grid 布局体系深度解析
前端·css3·布局·flexbox·grid·工程实践·全栈工程师