当前位置：首页 > article >正文

CSS学习笔记5——渐变属性+盒子模型阶段案例

article 2026/2/18 3:51:34

通俗易懂的解释

渐变的类型

1、线性渐变

渐变过程

2、径向渐变

如何理解CSS的径向渐变，以及其渐变属性

通俗易懂的解释

渐变属性

1. 形状（Shape）

2. 大小（Size）

3. 颜色停靠点（Color Stops）

代码解析

渐变过程

3、重复渐变

4、阶段案例——感动中国人物榜

CSS 的渐变属性允许你创建从一种颜色平滑过渡到另一种颜色的背景效果。

通俗易懂的解释

想象一下，你在画一幅画，你想让颜色从红色慢慢变成蓝色。你不会直接在红色旁边画蓝色，而是让它们之间有一个过渡区域，红色逐渐变成蓝色。CSS 的渐变属性就是用来实现这种效果的。

渐变的类型

线性渐变（Linear Gradient）：颜色沿着直线方向变化，比如从左到右、从上到下。

径向渐变（Radial Gradient）：颜色从一个中心点向外扩散，比如从中心到边缘。

总结：CSS 渐变属性让你可以在网页上创建颜色平滑过渡的效果。你可以选择线性渐变（沿直线变化）或径向渐变（从中心向外变化），并指定起始和结束颜色。

1、线性渐变

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>盒子模型</title><style type="text/css">p{width: 200px;height: 200px;background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);}</style> 
</head>
<body><p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。</p>
</body>
</html>

渐变核心代码（background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);）解释：

background-image:

这是一个CSS属性，用于为元素设置背景图像。

在这个例子中，背景图像是一个线性渐变。

linear-gradient:

这是一个CSS函数，用于创建线性渐变。

它接受多个参数来定义渐变的方向和颜色。

30deg:

这是渐变的角度，表示渐变线与水平线的夹角。

30deg 表示渐变线与水平线成30度角，从左下方向右上方渐变。

#0f0 50%:

这是第一个颜色停靠点。

#0f0 是绿色的十六进制颜色代码。

50% 表示这个颜色在渐变的50%位置。

#ccc 70%:

这是第二个颜色停靠点。

#ccc 是浅灰色的十六进制颜色代码。

70% 表示这个颜色在渐变的70%位置。

red 80%:

这是第三个颜色停靠点。

red 是红色。

80% 表示这个颜色在渐变的80%位置。

渐变过程

从起点（0%）到50%位置：背景颜色从透明逐渐变为绿色（#0f0）。

从50%到70%位置：背景颜色从绿色（#0f0）逐渐变为浅灰色（#ccc）。

从70%到80%位置：背景颜色从浅灰色（#ccc）逐渐变为红色（red）。

从80%到终点（100%）：背景颜色保持为红色（red）。

效果展示

2、径向渐变

如何理解CSS的径向渐变，以及其渐变属性

CSS的径向渐变（Radial Gradient）是一种从中心点向外扩散的颜色过渡效果。你可以把它想象成一个圆形或椭圆形的光环，颜色从中心向边缘逐渐变化。

通俗易懂的解释

想象一下，你有一个光源，光线从中心向四周扩散。光线的强度和颜色在扩散过程中逐渐变化，这就是径向渐变的效果。在CSS中，你可以通过radial-gradient()函数来实现这种效果。

渐变属性

1. 形状（Shape）

circle：创建一个圆形渐变。

ellipse：创建一个椭圆形渐变。

2. 大小（Size）

closest-side：渐变的终点在离中心最近的边缘。

farthest-side：渐变的终点在离中心最远的边缘。

closest-corner：渐变的终点在离中心最近的角。

farthest-corner：渐变的终点在离中心最远的角。

3. 颜色停靠点（Color Stops）

颜色停靠点是指定渐变中颜色变化的位置。

你可以定义多个颜色停靠点，每个停靠点包括一个颜色值和一个位置值。

位置值可以是百分比（如30%）或具体的长度值（如100px）。

基本径向渐变

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>径向渐变示例</title><style>.box {width: 300px;height: 300px;background-image: radial-gradient(circle, red, yellow, green);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果展示

指定形状、大小、位置和颜色停靠点

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>径向渐变示例</title><style>.box {width: 300px;height: 200px;background-image: radial-gradient(ellipse farthest-side at left, red 20%, yellow 40%, green 60%);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

核心代码解析

代码解析
background-image: radial-gradient(ellipse farthest-side at left, red 20%, yellow 40%, green 60%);
background-image:

这是一个CSS属性，用于为元素设置背景图像。

在这个例子中，背景图像是一个径向渐变。

radial-gradient:

这是一个CSS函数，用于创建径向渐变。

它接受多个参数来定义渐变的形状、大小、位置和颜色。

ellipse farthest-side at left:

ellipse：表示渐变的形状是椭圆形。

farthest-side：表示渐变的大小，渐变会延伸到离中心最远的边缘。

at left：表示渐变的中心位置在元素的左侧。

red 20%:

这是第一个颜色停靠点。

red 是红色。

20% 表示这个颜色在渐变的20%位置。

yellow 40%:

这是第二个颜色停靠点。

yellow 是黄色。

40% 表示这个颜色在渐变的40%位置。

green 60%:

这是第三个颜色停靠点。

green 是绿色。

60% 表示这个颜色在渐变的60%位置。

渐变过程

从中心（左侧）到20%位置：背景颜色从红色（red）开始。

从20%到40%位置：背景颜色从红色（red）逐渐变为黄色（yellow）。

从40%到60%位置：背景颜色从黄色（yellow）逐渐变为绿色（green）。

从60%到边缘：背景颜色保持为绿色（green）。

效果展示

3、重复渐变

【1】重复线性渐变

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>径向渐变示例</title><style>p{width: 200px;height: 200px;background-image: repeating-linear-gradient(90deg,#e50743,#e8ed30,#3fa62e 20%);/* 最后一个位置参数为20%，说明有五个充分周期，每个周期长度为边框宽度的20% */}</style>
</head>
<body><p></p>
</body>
</html>

效果展示

【2】重复径向渐变

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>径向渐变示例</title><style>p{width: 200px;height: 200px;background-image: repeating-radial-gradient(circle at center, #e50743,#e8ed30,#3fa62e 20%);/* 最后一个位置参数为20%，说明有五个充分周期，每个周期长度为边框宽度的20% */}</style>
</head>
<body><p></p>
</body>
</html>

效果展示

4、阶段案例——感动中国人物榜

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>感动中国人物榜</title><link href="css/style24.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg"><ul><li class="tp"></li><li>彭士禄</li><li>杨振宁</li><li>顾诵芬</li><li>吴天一</li><li class="yj">朱彦夫</li></ul>
</div>
</body>
</html>

CSS代码

*{margin:0; padding:0; list-style:none; outline:none;}
/*整体控制人物榜模块*/
.bg{width:600px; height:550px; background-image:repeating-radial-gradient(circle at 50% 50%,#c9120a,#9e110b 1%);margin:50px auto; padding:40px;  border-radius:50%;padding-top:50px;border:10px solid #eee;}
/*人物名字部分*/	
ul{width:372px; height:530px; background:#e94632; border-radius:30px; box-shadow:15px 15px 12px #000; margin:0 auto;
}
ul li{width:372px; height:55px; background:#da171b url(../img/huo.png) no-repeat 70px 20px; margin-bottom:2px;font-size:18px; color:#fdc578; line-height:55px; text-align:center; font-family:"微软雅黑";}
/*需要单独控制的列表项*/		
ul .tp{width:372px; height:247px;background:#da171b; background-image:url(../img/gandong.png),url(../img/wenzi.png);background-repeat:no-repeat;background-position:87px 16px,99px 192px;border-radius:30px 30px 0 0;}
ul .yj{border-radius:0 0 30px 30px;}

效果展示

两张背景图片的分布位置解析（直接看结论版）：
层级关系：

先写的 gandong.png 像「贴纸」盖在 wenzi.png 上方（若位置重叠）

精确坐标：

第一张图（gandong.png）：

距离容器左侧87px

距离容器顶部16px

相当于贴在容器左上区域，靠近顶部

第二张图（wenzi.png）：

距离容器左侧99px

距离容器顶部192px

相当于贴在容器左下区域，靠近底部
直观示意图：

复制
┌───────────────────────┐（容器372x247px）
│     红色背景          │
│                       │
│  🖼️gandong.png        │ ← 贴在(87,16)位置
│                       │
│                       │
│                       │
│                       │
│     🖼️wenzi.png       │ ← 贴在(99,192)位置
└───────────────────────┘（底部直角）
补充提示：

实际显示效果需确保图片尺寸 ≤ 容器剩余空间（如 gandong.png 宽度应 ≤ 372-87=285px）

用浏览器按 F12 审查元素，在样式面板拖动坐标值可实时观察图片移动

CSS学习笔记5——渐变属性+盒子模型阶段案例

目录通俗易懂的解释渐变的类型 1、线性渐变渐变过程 2、径向渐变如何理解CSS的径向渐变，以及其渐变属性通俗易懂的解释渐变属性 1. 形状（Shape） 2. 大小（Size） 3. 颜色停靠点（Color Sto…...

编程日记 2026/2/18 3:51:34

[Java微服务架构]4_服务通信之客户端负载均衡

欢迎来到啾啾的博客🐱，一个致力于构建完善的Java程序员知识体系的博客📚，记录学习的点滴，分享工作的思考、实用的技巧，偶尔分享一些杂谈💬。欢迎评论交流，感谢您的阅读&#x1f604…...

编程日记 2026/2/12 17:33:31

基于SpringBoot实现的高校实验室管理平台功能四

一、前言介绍： 1.1 项目摘要随着信息技术的飞速发展，高校实验室的管理逐渐趋向于信息化、智能化。传统的实验室管理方式存在效率低下、资源浪费等问题，因此，利用现代技术手段对实验室进行高效管理显得尤为重要。高校实验室作为…...

编程日记 2026/2/14 21:07:33

吴恩达深度学习复盘（1）神经网络与深度学习的发展

一、神经网络的起源与生物学动机灵感来源神经网络的最初动机源于对生物大脑的模仿。20 世纪 50 年代，科学家试图通过软件模拟神经元的工作机制（如树突接收信号、轴突传递信号），构建类似人类大脑的信息处理系统。生物神经元的简…...

编程日记 2026/2/17 18:23:21

用Python实现资本资产定价模型（CAPM）

使用 Python 计算资本资产定价模型（CAPM）并获取贝塔系数（β）。步骤 1：导入必要的库 import pandas as pd import yfinance as yf import statsmodels.api as sm import matplotlib.pyplot as plt 步骤 2&#xff1…...

编程日记 2026/2/18 10:58:57

Linux进程管理之子进程的创建(fork函数)、子进程与线程的区别、fork函数的简单使用例子、子进程的典型应用场景、父进程等待子进程结束后自己再结束

收尾进程终止：子进程通过exit()或_exit()终止，父进程通过wait()或waitpid()等待子进程终止，并获取其退出状态。？其实可以考虑在另一篇博文中来写 fork函数讲解 fork函数概述 fork() 是 Linux 中用于创建新进程的系统调用。当…...

编程日记 2026/2/13 14:35:10

妙用《甄嬛传》中的选妃来记忆概率论中的乘法公式

强烈推荐最近在看的不错的B站概率论课程《概率统计》正课，零废话，超精讲！【孔祥仁】《概率统计》正课，零废话，超精讲！【孔祥仁】_哔哩哔哩_bilibili 其中概率论中的乘法公式，老师用了《甄嬛传…...

编程日记 2026/2/15 0:44:30

虚幻基础：UI

文章目录控件蓝图可以装载其他控件蓝图可以安装其他蓝图接口填充：相对于父组件填充水平框尺寸—填充—0.5：改变填充的尺寸填充—0.5：改变与父组件的距离锚点：相对于父组件的控件坐标系原点，屏幕比例改变时&#xff…...

编程日记 2026/2/15 21:00:27

【MySQL篇】事务管理，事务的特性及深入理解隔离级别

目录一，什么是事务二，事务的版本支持三，事务的提交方式四，事务常见操作方式五，隔离级别 1，理解隔离性 2，查看与设置隔离级别 3，读未提交（read uncommitted&a…...

编程日记 2026/2/17 12:16:22

抄上一次写过的代码： import React, { useState, useEffect } from "react"; import axios from axios; import { Button, Table, Modal } from antd; import { BarsOutlined, DeleteOutlined, ExclamationCircleOutlined } from ant-design/icons;const…...

编程日记 2026/2/16 4:16:36

fetch`的语法规则及常见用法

fetch() 是 JavaScript 用于发送 HTTP 请求的内置 API，功能强大，语法简洁。以下是 fetch 的语法规则及常见用法。 1. fetch 基本语法 fetch(url, options).then(response > response.json()) // 解析 JSON 响应体.then(data > console.log(data))…...

编程日记 2026/2/13 2:44:46

如何排查java程序的宕机和oom？如何解决宕机和oom？

排查oom 用jmap生成我们的堆空间的快照Heap Dump（堆转储文件），来分析我们的内存占用用可视化工具，例如java中的jhat分析Heap Dump文件 ，它分析完会通过一个浏览器打开一个可视化页面展示分析结果根据oom的类型来调…...

编程日记 2025/7/8 22:58:44

26_ajax

目录了解接口前后端交互一、安装服务器环境 nodejs ajax发起请求渲染响应结果 get方式传递参数 post方式传递参数封装ajax_上封装ajax下了解清楚前后端交互就可以写一些后端代码了。小项目现在写项目开发的时候都是前后端分离之前都没有前端这个东西&a…...

编程日记 2026/2/17 14:21:40

代理模式（Proxy Pattern）实现与对比

代理模式（Proxy Pattern）实现与对比 1. 虚拟代理（Virtual Proxy） 定义：延迟加载对象，避免资源浪费。适用场景：大文件或资源的加载（如图片、数据库连接）。代码示例 /…...

编程日记 2026/2/12 17:54:23

MySQL - 数据库基础操作

SQL语句结构化查询语言(Structured Query Language)，在关系型数据库上执行数据操作、数据检索以及数据维护的标准语言。分类 DDL 数据定义语言(Data Definition Language)，定义对数据库对象(库、表、列、索引)的操作。 DML 数据操作语言(Data Manip…...

编程日记 2026/2/12 1:44:47

Spring Boot热部署插件

在实际开发中，我们修改某些代码或页面都需要重启应用后才能生效，如果每次都手动重启，会降低了开发效率；热部署是指当我们修改代码后，服务能自动重启加载新修改的内容，这样大大提高了我们开发的效率&#xf…...

编程日记 2026/2/17 8:59:56

pip install cryptacular卡住，卡在downloading阶段

笔者安装pip install cryptacular卡在downloading阶段，但不知道为何 Collecting cryptacularCreated temporary directory: /tmp/pip-unpack-qfbl8f08http://10.170.22.41:8082 "GET http://repo.huaweicloud.com/repository/pypi/packages/42/69/34d478310d6…...

编程日记 2026/2/14 12:14:12

AI大模型从0到1记录学习 day09

第 8 章面向对象之类和对象 8.1 面向过程和面向对象面向过程编程（Procedural Programming）和面向对象编程（OOP）是两种不同的编程范式，它们在软件开发中都有广泛的应用。 Python是一种混合型的语言，既支持…...

编程日记 2026/2/3 14:36:02

【FW】ADB指令分类速查清单

1. 设备管理指令核心作用adb devices列出已连接设备adb reboot重启设备adb reboot bootloader进入Bootloader模式adb reboot recovery进入Recovery模式adb root获取Root权限（需设备支持）adb remount挂载系统分区为可读写 2. 应用管理指令核心作用adb…...

编程日记 2026/2/11 5:02:12

Kafka中的消息是如何存储的？

大家好，我是锋哥。今天分享关于【Kafka中的消息是如何存储的？】面试题。希望对大家有帮助； 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 Kafka 中，消息是通过日志（Log） 的方式进行存储的。…...

编程日记 2026/2/17 3:46:56

Altium Designer——同时更改多个元素的属性（名称、网络标签、字符串标识）

右键要更改的其中一个对象，选择查找相似… 进入到筛选界面，就是选择你要多选的对象的共同特点（名字、大小等等），我这里要更改的是网络标签，所以我选择Text设置为一样。点击应用就是应用该筛选调节&#…...

编程日记 2026/2/14 5:33:33

当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计

当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计模式交响曲的实现模板方法模式搭建烹饪骨架（抽象类）具体菜品（子类） 工厂模式模式协作的优势呈现扩展性演示运行时流程控制完整代码如果在学习设计模式的过程中…...

编程日记 2026/2/17 9:04:02

c++位运算总结

在C中，位运算是对二进制位进行操作的运算，主要有以下几种： 1. 按位与（ & ）：两个操作数对应位都为1时，结果位才为1，否则为0。例如 3 & 5 ， 3 二进制是 0000 0011…...

编程日记 2026/2/17 13:36:23

企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

文章目录一、引言二、主流产品与方案对比表三、自建方案 vs. 开源产品集成：技术路径对比3.1 自建方案3.2 开源产品集成方案四、结论与个人观点一、引言在当今数据驱动的商业环境中，构建高质量的知识库已成为企业数字化转型的关键一环。本博客分别从…...

编程日记 2026/2/17 10:29:33

Python小练习系列 Vol.6：单词搜索（网格回溯）

🧠 Python小练习系列 Vol.6：单词搜索（网格回溯） 🔍 本期我们来挑战一道 LeetCode 上经典的网格型回溯题 —— 单词搜索，考察对 DFS 状态恢复的掌握！ 🧩 一、题目描述给定一个 m x…...

编程日记 2026/2/14 0:43:05

shell脚本--MySQL简单调用

实现功能增数据库的创建，数据表的创建已经实现创建用户删删除数据库， 删除库下的某个表， 删除某个用户改暂无查查看所有的数据库， 查看某个库下的所有数据表， 查看某个表的结构， 查…...

编程日记 2026/2/13 1:24:39

vue3项目配置别名

vue3项目配置别名 src别名的配置TypeScript 编译配置如果出现/别名引入报找不到的问题 src别名的配置在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！ // vite.config.ts import {defineCon…...

编程日记 2026/2/12 17:52:15

Rust 面向对象

Rust 面向对象引言 Rust 是一种系统编程语言，以其高性能、内存安全和并发支持而受到关注。Rust 的面向对象特性是其强大功能之一，它允许开发者以面向对象的方式构建复杂的应用程序。本文将深入探讨 Rust 的面向对象编程（OOP）特性，包括类的定义、继承、封装和多态等概念…...

编程日记 2026/2/15 2:37:55

[ C语言 ] | 从0到1？

目录认识计算机语言 C语言工欲善其事必先利其器第一个C语言代码这一些列 [ C语言 ] ，就来分享一下 C语言相关的知识点~ 认识计算机语言我们说到计算机语言，语言，就是用来沟通的工具，计算机语言呢？就是我们…...

编程日记 2026/2/15 18:31:54

[Mac]利用Hexo+Github Pages搭建个人博客

由于我这台Mac基本没啥环境，因此需要从零开始配置，供各位参考。注意⚠️：MacBook (M4)使用/bin/zsh作为默认Shell，其对应的配置文件为~/.zshrc 参考文档： HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程文…...

编程日记 2026/2/16 12:57:31

通俗易懂的解释

渐变的类型

1、线性渐变

渐变过程

2、径向渐变

如何理解CSS的径向渐变，以及其渐变属性

通俗易懂的解释

渐变属性

1. 形状（Shape）

2. 大小（Size）

3. 颜色停靠点（Color Stops）

代码解析

渐变过程

3、重复渐变

4、阶段案例——感动中国人物榜

相关文章：