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

news2025/4/24 17:36:38

目录

通俗易懂的解释

渐变的类型

1、线性渐变 

渐变过程

2、径向渐变 

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

通俗易懂的解释

渐变属性

1. 形状（Shape）

2. 大小（Size）

3. 颜色停靠点（Color Stops）

代码解析

渐变过程

3、重复渐变 

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

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

通俗易懂的解释

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

渐变的类型

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

  2. 径向渐变（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%);）解释：  

  1. background-image:

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

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

  2. linear-gradient:

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

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

  3. 30deg:

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

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

  4. #0f0 50%:

    • 这是第一个颜色停靠点。

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

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

  5. #ccc 70%:

    • 这是第二个颜色停靠点。

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

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

  6. 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%);

  1. background-image:

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

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

  2. radial-gradient:

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

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

  3. ellipse farthest-side at left:

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

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

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

  4. red 20%:

    • 这是第一个颜色停靠点。

    • red 是红色。

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

  5. yellow 40%:

    • 这是第二个颜色停靠点。

    • yellow 是黄色。

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

  6. 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;}

效果展示 

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

  1. 层级关系：

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

  2. 精确坐标：

    • 第一张图（gandong.png）：

      • 距离容器左侧87px

      • 距离容器顶部16px

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

    • 第二张图（wenzi.png）：

      • 距离容器左侧99px

      • 距离容器顶部192px

      • 相当于贴在容器左下区域，靠近底部

  3. 直观示意图：

    复制

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

补充提示：

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2324500.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

欢迎来到啾啾的博客&#x1f431;&#xff0c;一个致力于构建完善的Java程序员知识体系的博客&#x1f4da;&#xff0c;记录学习的点滴&#xff0c;分享工作的思考、实用的技巧&#xff0c;偶尔分享一些杂谈&#x1f4ac;。 欢迎评论交流&#xff0c;感谢您的阅读&#x1f604…
阅读更多...
基于SpringBoot实现的高校实验室管理平台功能四

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

一、前言介绍&#xff1a; 1.1 项目摘要 随着信息技术的飞速发展&#xff0c;高校实验室的管理逐渐趋向于信息化、智能化。传统的实验室管理方式存在效率低下、资源浪费等问题&#xff0c;因此&#xff0c;利用现代技术手段对实验室进行高效管理显得尤为重要。 高校实验室作为…
阅读更多...
用Python实现资本资产定价模型（CAPM）

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

使用 Python 计算资本资产定价模型&#xff08;CAPM&#xff09;并获取贝塔系数&#xff08;β&#xff09;。 步骤 1&#xff1a;导入必要的库 import pandas as pd import yfinance as yf import statsmodels.api as sm import matplotlib.pyplot as plt 步骤 2&#xff1…
阅读更多...
Linux进程管理之子进程的创建(fork函数)、子进程与线程的区别、fork函数的简单使用例子、子进程的典型应用场景、父进程等待子进程结束后自己再结束

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

收尾 进程终止&#xff1a;子进程通过exit()或_exit()终止&#xff0c;父进程通过wait()或waitpid()等待子进程终止&#xff0c;并获取其退出状态。&#xff1f;其实可以考虑在另一篇博文中来写 fork函数讲解 fork函数概述 fork() 是 Linux 中用于创建新进程的系统调用。当…
阅读更多...
妙用《甄嬛传》中的选妃来记忆概率论中的乘法公式

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

强烈推荐最近在看的不错的B站概率论课程 《概率统计》正课&#xff0c;零废话&#xff0c;超精讲&#xff01;【孔祥仁】 《概率统计》正课&#xff0c;零废话&#xff0c;超精讲&#xff01;【孔祥仁】_哔哩哔哩_bilibili 其中概率论中的乘法公式&#xff0c;老师用了《甄嬛传…
阅读更多...
【MySQL篇】事务管理，事务的特性及深入理解隔离级别

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

目录 一&#xff0c;什么是事务 二&#xff0c;事务的版本支持 三&#xff0c;事务的提交方式 四&#xff0c;事务常见操作方式 五&#xff0c;隔离级别 1&#xff0c;理解隔离性 2&#xff0c;查看与设置隔离级别 3&#xff0c;读未提交&#xff08;read uncommitted&a…
阅读更多...
项目实战-角色列表

项目实战-角色列表

抄上一次写过的代码&#xff1a; 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…
阅读更多...
26_ajax

26_ajax

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

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

大家好&#xff0c;我是锋哥。今天分享关于【Kafka中的消息是如何存储的&#xff1f;】面试题。希望对大家有帮助&#xff1b; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#xff0c;消息是通过 日志&#xff08;Log&#xff09; 的方式进行存储的。…
阅读更多...
Altium Designer——同时更改多个元素的属性（名称、网络标签、字符串标识）

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

右键要更改的其中一个对象&#xff0c;选择查找相似… 进入到筛选界面&#xff0c;就是选择你要多选的对象的共同特点&#xff08;名字、大小等等&#xff09;&#xff0c;我这里要更改的是网络标签&#xff0c;所以我选择Text设置为一样。 点击应用就是应用该筛选调节&#…
阅读更多...
当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计

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

当模板方法模式遇上工厂模式&#xff1a;一道优雅的烹饪架构设计 模式交响曲的实现模板方法模式搭建烹饪骨架&#xff08;抽象类&#xff09;具体菜品&#xff08;子类&#xff09; 工厂模式 模式协作的优势呈现扩展性演示运行时流程控制 完整代码 如果在学习 设计模式的过程中…
阅读更多...
企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

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

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

vue3项目配置别名

vue3项目配置别名 src别名的配置TypeScript 编译配置如果出现/别名引入报找不到的问题 src别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名&#xff01;&#xff01;&#xff01; // vite.config.ts import {defineCon…
阅读更多...
[ C语言 ] | 从0到1？

[ C语言 ] | 从0到1？

目录 认识计算机语言 C语言 工欲善其事必先利其器 第一个C语言代码 这一些列 [ C语言 ] &#xff0c;就来分享一下 C语言 相关的知识点~ 认识计算机语言 我们说到计算机语言&#xff0c;语言&#xff0c;就是用来沟通的工具&#xff0c;计算机语言呢&#xff1f;就是我们…
阅读更多...
[Mac]利用Hexo+Github Pages搭建个人博客

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

由于我这台Mac基本没啥环境&#xff0c;因此需要从零开始配置&#xff0c;供各位参考。 注意⚠️&#xff1a;MacBook (M4)使用/bin/zsh作为默认Shell&#xff0c;其对应的配置文件为~/.zshrc 参考文档&#xff1a; HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程 文…
阅读更多...
Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决&#xff08;保姆级教学&#xff01;&#xff09; 在使用Qt开发IMX6ULL嵌入式系统的过程中&#xff0c;我遇到了图片加载的常见问题。本文将分享问题排查的详细过程和解决方案&#xff0c;希望能帮助遇到类似困难的开发者。 问题…
阅读更多...
界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化

界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Kendo…
阅读更多...
pycharm终端操作远程服务器

pycharm终端操作远程服务器

pycharm项目已经连接了远程服务器&#xff0c;但是打开终端&#xff0c;却依旧显示的是本地的那个环境&#xff0c;也就是说没有操作远程的那个环境。只能再使用Xshell去操作远程环境&#xff0c;很麻烦&#xff0c;找了下教程。 来源&#xff1a;https://blog.csdn.net/maolim…
阅读更多...
接口测试中数据库验证，怎么解决？

接口测试中数据库验证，怎么解决？

在接口测试中&#xff0c;通常需要在接口调用前后查询数据库&#xff0c;以验证接口操作是否正确影响了数据库状态。​这可以通过数据库断言来实现&#xff0c;PyMySQL库常用于连接和操作MySQL数据库。​通过该库&#xff0c;可以在测试中执行SQL语句&#xff0c;查询或修改数据…
阅读更多...
Playwright从入门到实战：比Selenium更快的数据爬取案例实战

Playwright从入门到实战：比Selenium更快的数据爬取案例实战

摘要 Playwright 是微软开源的下一代浏览器自动化工具&#xff0c;凭借其高性能、跨浏览器支持和现代化设计&#xff0c;迅速成为 Web 自动化领域的热门选择。本文将从 安装配置 开始&#xff0c;通过 实战演练 展示其核心功能&#xff0c;并与 Selenium 深度对比&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023