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

相关推荐
小张成长计划..2 天前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
Filotimo_5 天前
2.CSS3.(3).html
前端·css3
Pu_Nine_96 天前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
Ares-Wang7 天前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
西洼工作室13 天前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
皮蛋瘦肉粥_12115 天前
pink老师html5+css3day06
前端·css3·html5
whltaoin15 天前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
皮蛋瘦肉粥_12120 天前
pink老师html5+css3day02
前端·css3·html5
qianmo202120 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
我不是程序媛lisa22 天前
前端正确处理“文字溢出”的思路与最佳实践
前端·css3