css渐变讲解（css的渐变）

myzbx 2025-01-24 13:04 48 浏览

语法：linear-gradient(方向,颜色 位置,颜色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析： 其中位置的百分比指的是颜色结束渐变的面积。
方向取值：top，bottom left等／0deg
（如果不写方向默认为180deg／top），方向前面不要加to。

方向参数：【角度参数】

我们以红色向黄色渐变为例子：

实际显示图片如下：

给出案例：提出两个问题来理解角度

下图描述红色向绿色渐变过程，请注意两个问题

第一：角度为何是负的，代表什么含义？

第二：百分比代表什么呢？

第三：角度永远开始于渐变线，终止于水平线；顺时针为负（有点反人类）

给出3个案例进一步理解角度问题

角度的正负其表现形式就是，渐变颜色的方向问题，就是从哪个颜色到哪个颜色的问题；

角度45 颜色A，颜色B， 实际效果我们从左向右阅读（习惯问题，其实计算机解码也是这个方向），就是先A这个颜色，然后再B这个颜色；

如果是负呢？角度-45 颜色A，颜色B，就是先B这个颜色，然后再A这个颜色；

位置参数，就是面积概念这个要理解透彻

案例：我们来看看一个30*30的棋盘案例

这个案例网上一大堆，我们今天进它的原理，原理不清楚啥也干不了，请千万不要抄代码，而不懂原理，否则你是不会进步的的；

下面图片的第一个红框请注意，任何复杂的图片都是由简单的可重复图片构成，棋盘格就是由这个红框重复组成的；

我们再思考一个问题？红框如何组成的能？ 一个白色背景，两个黑色块；我们重点关注两个黑色块如何完成，问题就解决了。

CSS 背景重复

上一篇：HTML文档中CSS样式的集成方法解析
下一篇：HTML DIV+CSS 命名规范大全（css id命名规则）

css渐变讲解（css的渐变）

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿