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

相关推荐
全球网站建设1 天前
从结构到交互:HTML5进阶开发全解析——语义化标签、Canvas绘图与表单设计实战
javascript·前端框架·php·reactjs·css3·html5
萱萱的七彩鱼2 天前
css3之三维变换详说
前端·javascript·css3
代码的余温6 天前
CSS3文本阴影特效全攻略
前端·css·css3
伍哥的传说6 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
smile boy7 天前
个人财务记录应用
前端·javascript·css·css3·html5
Java&Develop8 天前
学生信息管理系统 - HTML实现增删改查
css·html·css3
说学逗唱攻城狮9 天前
css3地球转动模型(动态数据)
前端·css·css3
爱吃派大星的土拨鼠9 天前
HTML结构解析
前端·html·css3
凌辰揽月10 天前
贴吧项目总结二
java·前端·css·css3·web
顾辰呀11 天前
css flex 一行2个元素 不能挤压空间
前端·css·css3