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

相关推荐
java1234_小锋4 天前
【技术专题】CSS3 网页技术 - CSS3 布局进阶
前端·css·css3
java1234_小锋4 天前
【技术专题】CSS3 网页技术 - CSS3 视觉增强
前端·css·css3
东鹏特饮6 天前
本机状态监控页面html
运维·css·html·css3
java1234_小锋7 天前
【技术专题】CSS3 网页技术 - CSS3 基础样式
android·前端·css3
java1234_小锋8 天前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
java1234_小锋9 天前
【技术专题】CSS3 网页技术 - CSS3 单位、颜色、字体与文本
前端·css·css3
java1234_小锋10 天前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
java1234_小锋12 天前
【技术专题】CSS3 网页技术 - CSS3 简介 & CSS 语法:选择器、属性、值、声明块
css3·1024程序员节
思码梁田12 天前
CSS 浏览器厂商前缀:从「写 5 遍」到现代自动化兼容
前端·css·css3·border-radius·1024程序员节·box-shadow·厂商前缀
feixing_fx13 天前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3