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

相关推荐
前端与小赵19 小时前
渐变背景色和渐变字体颜色的实现方法
css·html·css3
Mo_jon19 小时前
CSS 瀑布流图片简易实现
前端·css·css3
晓风残月淡2 天前
Mermaid流程图更改样式的方法
css·流程图·css3
星月前端2 天前
css3元素倒影效果属性:box-reflect
前端·css·css3
十一.3662 天前
171-178CSS3新增
前端·javascript·css3
Bling_Bling_13 天前
面试常考css:三列布局实现方式
前端·html·css3
自动花钱机6 天前
从零开始配置前端环境及必要软件安装
前端·javascript·vue.js·css3·html5
暖木生晖6 天前
css3背景线性渐变:linear-gradient
前端·html·css3
lumi.6 天前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3
末日的狂欢姐9 天前
AXUI前端框架推出全新自定义主题颜色工具
css3·html5·前端开发·网站开发·网站模板