CSS3 基础（背景-文本效果）
二、背景效果
| 属性 | 功能 | 示例值 | 说明 |
|---|---|---|---|
background | 设置背景颜色或渐变 | background: linear-gradient(45deg, #4CAF50, #FF5722); | 设置背景颜色、图片或渐变效果。 |
background-size | 调整背景图片大小 | background-size: cover; | 设置背景图片的显示大小，如 cover 或 contain。 |
background-clip | 控制背景绘制范围 | background-clip: content-box; | 控制背景绘制范围，可选值：border-box、padding-box、content-box。 |
1、背景渐变语法：
/* 线性渐变（默认从上到下） */
background: linear-gradient(方向或角度, 颜色1, 颜色2, ...);/* 径向渐变（从中心向外扩散） */
background: radial-gradient(形状或位置, 颜色1, 颜色2, ...);/* 圆锥渐变（围绕中心旋转） */
background: conic-gradient(起始角度, 颜色1, 颜色2, ...);
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 渐变与多重背景</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;display: flex;justify-content: space-around;align-items: center;height: 100vh;flex-wrap: wrap;}/* 线性渐变 */.linear-gradient1 {width: 300px;height: 200px;background: linear-gradient( #ff7e5f, #ece3dc); /* 从上到下（默认） */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 线性渐变 */.linear-gradient2 {width: 300px;height: 200px;background: linear-gradient(to right, #ff7e5f, #ece3dc); /* 从左到右 */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 线性渐变 */.linear-gradient3 {width: 300px;height: 200px;background: linear-gradient(to bottom right , #ff7e5f, #ece3dc); /* 对角线（左上到右下） */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 线性渐变 */.linear-gradient4 {width: 300px;height: 200px;background: linear-gradient(45deg, #ff7e5f, #ece3dc); /* 角度（如 45deg） 从左上到右下的渐变 */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 径向渐变 */.radial-gradient {width: 300px;height: 200px;background: radial-gradient(circle, #ff7e5f, #ece3dc); /* 从中心向外的圆形渐变 */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 重复渐变 */.repeating-gradient {width: 300px;height: 200px;background: repeating-linear-gradient(45deg, #ff7e5f, #ece3dc 20px, #ff7e5f 40px); /* 重复的线性渐变 */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}/* 多重背景叠加 */.multi-background {width: 300px;height: 200px;background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(197, 36, 36, 0.5)), /* 半透明的线性渐变 */url('https://via.placeholder.com/300x200') no-repeat center/cover; /* 背景图片 */border-radius: 10px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;text-align: center;}</style>
</head>
<body><div class="linear-gradient1">线性渐变-从上到下</div><div class="linear-gradient2">线性渐变-从左到右</div><div class="linear-gradient3">线性渐变-对角线</div><div class="linear-gradient4">线性渐变-角度45deg</div><div class="radial-gradient">径向渐变</div><div class="repeating-gradient">重复渐变</div><div class="multi-background">多重背景叠加</div>
</body>
</html>
2、背景图片大小
| 属性值/用法 | 描述 | 示例 | 注意事项 |
|---|---|---|---|
cover | 保持图片宽高比，拉伸以完全覆盖容器（可能裁剪） | background-size: cover; | 常用于全屏背景设计，需配合 background-position 调整显示区域 |
contain | 保持图片宽高比，缩放以完整显示在容器内（可能留白） | background-size: contain; | 适合需完整展示图片的场景（如小图标） |
| 单值语法 | 仅设置宽度，高度自动按比例计算 |
（宽度 100px，高度自适应） | 百分比值基于容器宽度（如 50% 表示容器宽度的一半） |
| 双值语法 | 同时设置宽度和高度（可能导致图片变形） | background-size: 200px 150px;（固定宽高） | 使用 auto 保留比例（如 100px auto 宽度固定，高度自适应） |
| 百分比 | 基于容器尺寸定义宽高（可能变形） |
宽度占容器 80%，高度占 60%） | 需注意容器尺寸是否明确，否则百分比可能失效 |
在 background 简写中 | 需通过 / 与 background-position 分隔，格式为 position/size | background: url(image.jpg) center/cover; | 若省略 position，需保留默认值（如 0 0/cover）否则语法错误 |
| 多背景图控制 | 为多个背景图分别设置尺寸，用逗号分隔 | background-size: cover, 50px;（第一张图 cover，第二张图宽度 50px） | 需与 background-image 中图片顺 |
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Background-Size 示例</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;display: flex;justify-content: space-around;}.box {width: 200px;height: 150px;border: 1px solid #312121;background-image: url('https://img0.baidu.com/it/u=2229144304,3578627907&fm=253&fmt=auto&app=138&f=JPEG?w=467&h=300');background-repeat: no-repeat;background-position: center;text-align: center;line-height: 150px;color: rgb(190, 39, 60);font-size: 14px;font-weight: bolder;}/* 1: 默认大小 */.box-auto {background-size: auto;}/* 2: 覆盖容器 */.box-cover {background-size: cover;}/* 3: 完全显示 */.box-contain {background-size: contain;}/* 4: 指定大小 */.box-fixed {background-size: 100px 50px; /* 宽度 100px，高度 50px */}/* 5: 百分比 */.box-percent{background-size: 80% 60%; /* 宽度 80%，高度 60% *//* 80% 是相对于容器的宽度，60% 是相对于容器的高度 */}/* 6: 多背景图 */.box-more {background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F10%2F2311%2F232626556_7_20211023114804116&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1748051084&t=fde811de6b9fb97d4415b10895ae5d6d'),linear-gradient(60deg, #ff7e5f, #ece3dc 20px, #d3a69b 40px);background-size: 100px auto,cover ; /* 第一图固定宽度，第二图覆盖容器 */}</style>
</head>
<body><div class="box box-auto">auto</div><div class="box box-cover">cover</div><div class="box box-contain">contain</div><div class="box box-fixed">100px 50px</div><div class="box box-percent">80% 60%</div><div class="box box-more">100px auto, cover</div>
</body>
</html>
3、背景绘制范围
background-clip: [值];
| 属性值 | 作用 | 示例 |
|---|---|---|
border-box | 默认值，背景延伸到边框区域（包括边框） | background-clip: border-box; |
padding-box | 背景仅延伸到内边距区域（不包含边框） | background-clip: padding-box; |
content-box | 背景仅延伸到内容区域（不包含内边距和边框） | background-clip: content-box; |
text | 背景裁剪为文字形状（需配合 color: transparent 实现文字渐变/图案填充） | background-clip: text;（需浏览器前缀） |
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Background-Clip 示例</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;display: flex;justify-content: space-around;align-items: center;}.box {width: 200px;height: 100px;border: 8px double #333;background: linear-gradient(45deg, #ff7e5f, #d1ccc9);color: white;font-size: 14px;display: flex;justify-content: wrap;align-items: center;text-align: center;margin: 20px;padding: 20px;}/* 默认值：背景绘制到边框外边缘 */.border-box {background-clip: border-box;}/* 背景绘制到内边距的外边缘 */.padding-box {background-clip: padding-box;}/* 背景仅绘制到内容区域 */.content-box {background-clip: content-box;}/* 背景裁剪到文字（仅适用于 Webkit 浏览器） */.text-clip {font-size: 24px;font-weight: bold;background-clip: text;-webkit-background-clip: text; /* 必须使用 Webkit 前缀 */color: transparent; /* 文字透明，显示背景 */}</style>
</head>
<body><div class="box border-box">border-box</div><div class="box padding-box">padding-box</div><div class="box content-box">content-box</div><div class="box text-clip" style="background: linear-gradient(to right, #ff7e5f, #feb47b);">Text Clip</div>
</body>
</html>
三、文本效果
text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];
| 参数 | 作用 | 示例 |
|---|---|---|
| 水平偏移 | 阴影水平方向偏移量（正数向右，负数向左） | 2px、-3px |
| 垂直偏移 | 阴影垂直方向偏移量（正数向下，负数向上） | 2px、-1px |
| 模糊半径 | 阴影模糊程度（值越大越模糊，0 为无模糊） | 4px、0（清晰边缘） |
| 颜色 | 阴影颜色（支持所有颜色格式：十六进制、RGB、RGBA 等） | #333、rgba(0,0,0,0.5) |
| 性 | 功能 | 示例值 | 说明 |
|---|---|---|---|
text-shadow | 添加文本阴影 | text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); | 为文本添加阴影效果，支持颜色、模糊半径等。 |
color | 设置文本颜色 | color: #4CAF50; | 设置文本颜色，支持十六进制、RGB、HSL 或颜色名称。 |
font-size | 设置文本大小 | font-size: 20px; | 设置文本的字体大小，支持像素（px）、百分比（%）、em 或 rem 单位。 |
font-weight | 设置文本粗细 | font-weight: bold; | 设置文本粗细，可选值：normal、bold 或数值（如 100、400、700）。 |
line-height | 设置文本行高 | line-height: 1.5; | 设置文本的行高，支持数值、百分比或单位（如 px）。 |
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Text-Shadow 示例</title><style>/* 简单阴影 */.simple-shadow {font-size: 24px;color: #333;text-shadow: 2px 2px 0px #888; /* 水平偏移 2px，垂直偏移 2px，无模糊 */}/* 模糊阴影 */.blur-shadow {font-size: 24px;color: #333;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 模糊半径 5px，半透明黑色 */}/* 多重阴影 */.multi-shadow {font-size: 24px;color: #333;text-shadow: 2px 2px 0px #ff7e5f, -2px -2px 0px #feb47b; /* 多个阴影 */}/* 霓虹效果 */.neon-shadow {font-size: 24px;color: #fff;text-shadow: 0 0 5px #ff7e5f, 0 0 10px #ff7e5f, 0 0 20px #feb47b; /* 多层模糊阴影 */background-color: #333;padding: 10px;border-radius: 5px;}</style>
</head>
<body><div class="simple-shadow">简单阴影</div><div class="blur-shadow">模糊阴影</div><div class="multi-shadow">多重阴影</div><div class="neon-shadow">霓虹效果</div>
</body>
</html>
相关文章：
CSS3 基础（背景-文本效果）
二、背景效果 属性功能示例值说明background设置背景颜色或渐变background: linear-gradient(45deg, #4CAF50, #FF5722);设置背景颜色、图片或渐变效果。background-size调整背景图片大小background-size: cover;设置背景图片的显示大小，如 cover 或 contain。back…...
点云配准算法之NDT算法原理详解
一、算法概述 NDT（Normal Distributions Transform）最初用于2D激光雷达地图构建（Biber & Straer, 2003），后扩展为3D点云配准。它将点云数据空间划分为网格单元（Voxel），在每个体…...
springboot在eclipse里面运行 run as 是Java Application还是 Maven
在 Eclipse 里运行 Spring Boot 项目时，既可以选择以“Java Application”方式运行，也可以通过 Maven 命令来运行，下面为你详细介绍这两种方式及适用场景。 以“Java Application”方式运行 操作步骤 在项目中找到带有 SpringBootApplicat…...
Redis 基础和高级用法入门
redis 是什么？ Redis是一个远程内存数据库，它不仅性能强劲，而且还具有复制特性以及为解决问题而生的独一无二的数据模型。Redis提供了5种不同类型的数据结构，各式各样的问题都可以很自然地映射到这些数据结构上：…...
使用vue2开发一个在线旅游预订平台-前端静态网站项目练习
hello,大家好，今天给大家再分享一个前端vue2练习项目-在线旅游预订平台。我们在学习编程的时候，除了学习编程的基础知识，为了让我们快速的掌握一门编程技术，肯定离不开各种项目的练习，今天分享的这个前端练习项目&…...
Ext Direct 功能与使用详解
Ext Direct 是 Ext JS 框架中的一个功能模块，旨在简化前端 JavaScript 应用与后端服务器之间的通信。其核心思想是通过远程过程调用（RPC）协议，将服务器端的方法透明地映射为前端可直接调用的 JavaScript 函数，从而减少手动编写 Ajax 请求和处理响应的代码量。 一、Ext Dir…...
Android移动应用开发入门示例：Activity跳转界面
介绍如何使用LinearLayout布局实现基本的UI设计，并实现两个Activity之间的跳转，适合刚接触Android Studio的新手学习。我们将使用Java语言开发，布局采用XML文件。以下为完整源码与运行说明： 案例前的准备工作： 1.1XM…...
【hadoop】HBase分布式数据库安装部署
一、HBase集群的安装与配置 步骤： 1、使用XFTP将HBase安装包hbase-1.2.0-bin.tar.gz发送到master机器的主目录。 2、解压安装包： tar -zxvf ~/hbase-1.2.0-bin.tar.gz 3、修改文件夹的名字，将其改为hbase，或者创建软连接也可…...
理解npm的工作原理：优化你的项目依赖管理流程
目录 什么是npm npm核心功能 npm 常用指令及其作用 执行npm i 发生了什么? 1. 解析命令与参数 2. 检查依赖文件 3. 依赖版本解析与树构建 4. 缓存检查与包下载 5. 解压包到 node_modules 6. 更新 package-lock.json 7. 处理特殊依赖类型 8. 执行生命周期脚本 9. …...
【Python笔记 04】输入函数、转义字符
一、Input 输入函数 prompt是提示，会在控制台显示，用作提示函数。 name input("请输入您的姓名：") print (name)提示你输入任意信息： 输入input test后回车，他输出input test 二、常用的转义字符 只讲…...
MySQL数据库基本操作-DQL-基本查询
数据库的操作中，查询是最重要的 一、基本查询-数据准备 -- 数据准备 create database if not exists mydb2; use mydb2; create table product( pid int primary key auto_increment, pname varchar(20) not null, price double, category_id varchar(20) …...
13、性能优化：魔法的流畅之道——React 19 memo/lazy
一、记忆封印术（React.memo） 1. 咒语本质 "memo是时间转换器的记忆晶石，冻结无意义的能量波动！" 通过浅层比较（shallowCompare）或自定义预言契约，阻止组件在props未变时重新渲染。 …...
低代码平台开发手机USB-HID调试助手
项目介绍 USB-HID调试助手是一种专门用于调试和测试USB-HID设备的软件工具。USB-HID设备是一类通过USB接口与计算机通信的设备，常见的HID设备包括键盘、鼠标、游戏控制器、以及一些专用的工业控制设备等。 主要功能包括： 数据监控：实时监控和…...
Langchain_Agent+数据库
本处使用Agent数据库，可以直接执行SQL语句。可以多次循环查询问题 前文通过chain去联系数据库并进行操作； 通过链的不断内嵌组合，生成SQL在执行SQL再返回。 初始化 import os from operator import itemgetterimport bs4 from langchain.ch…...
Code Splitting 分包策略
以下是关于分包策略（Code Splitting）的深度技术解析，涵盖原理、策略、工具实现及优化技巧： 一、分包核心价值与底层原理 1. 核心价值矩阵 维度未分包场景合理分包后首屏速度需加载全部资源仅加载关键资源缓存效率任意修改导致全量缓存失效按模块变更频率分层缓存并行加载单…...
AI 开发入门之 RAG 技术
目录 一、从一个简单的问题开始二、语言模型“闭卷考试”的困境三、RAG 是什么—LLM 的现实世界“外挂”四、RAG 的七步流程第一步：加载数据（Load）第二步：切分文本（Chunking）第三步：向量化&…...
day36图像处理OpenCV
文章目录 一、图像预处理18 模板匹配18.1模板匹配18.2 匹配方法18.2.1 平方差匹配18.2.2 归一化平方差匹配18.2.3 相关匹配18.2.4 归一化相关匹配18.2.5 相关系数匹配18.2.6 归一化相关系数匹配 18.3 绘制轮廓18.4案例 一、图像预处理 18 模板匹配 18.1模板匹配 模板匹配就是…...
系统与网络安全------弹性交换网络（3）
资料整理于网络资料、书本资料、AI，仅供个人学习参考。 STP协议 环路的危害 单点故障 PC之间的互通链路仅仅存在1个 任何一条链路出现问题，PC之间都会无法通信 解决办法 提高网络可靠性 增加冗余/备份链路 增加备份链路后交换网络上产生二层环路 …...
FPGA上实现YOLOv5的一般过程
在FPGA上实现YOLOv5 YOLO算法现在被工业界广泛的应用，虽说现在有很多的NPU供我们使用，但是我们为了自己去实现一个NPU所以在本文中去实现了一个可以在FPGA上运行的YOLOv5。 YOLOv5的开源代码链接为 https://github.com/ultralytics/yolov5 为了在FPGA中…...
verilog和system verilog常用数据类型以及常量汇总
int和unsigned 在 Verilog-2001 中，没有 int 和 unsigned 这样的数据类型。这些关键字是 SystemVerilog 的特性，而不是 Verilog-2001 的一部分。 Verilog-2001 的数据类型 在 Verilog-2001 中，支持的数据类型主要包括以下几种： …...
wordpress学习笔记
P1 P2 P3...
Rust 学习笔记：编程语言的相关概念
Rust 学习笔记：编程语言的相关概念 Rust 学习笔记：编程语言的相关概念动态类型 vs 静态类型动态类型 (Dynamically Typed)静态类型 (Statically Typed)对比示例 强类型 vs 弱类型强类型 (Strongly Typed)弱类型 (Weakly Typed)对比示例 编译型语言 vs 解…...
react nativeWebView跨页面通信
场景 react native项目里，有一些移动端的应用喜欢使用h5来开发，会出现需要跨tab和跨页面通信的场景，可以使用pubsub-js来实现通信。 实现思路 在react native 层实现pubsub的公共API，提供订阅消息、发布消息、取消订阅接口&…...
Python爬虫（3）HTML核心技巧：从零掌握class与id选择器，精准定位网页元素
目录 一、背景与意义二、class与id的基础概念与语法规则2.1 什么是class与id？2.2 核心区别总结 三、应用场景与实战案例3.1 场景1：CSS样式管理3.2 场景2：JavaScript交互3.3 场景3：SEO优化与语义化 四、常见误区与最…...
BGE（BAAI General Embedding）模型详解
BGE（BAAI General Embedding）模型详解 BGE（BAAI General Embedding）是北京智源人工智能研究院（BAAI）推出的通用文本嵌入模型系列，旨在为各种自然语言处理任务提供高质量的向量表示。 一、BGE模…...
【Linux网络】应用层自定义协议与序列化及Socket模拟封装
📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...
Rust项目GPG签名配置指南
Rust项目GPG签名配置指南 一、环境准备 # 安装Gpg4win（Windows） winget install -e --id GnuPG.Gpg4win二、密钥生成与配置 # 生成RSA4096密钥 gpg --full-generate-key # 类型选RSA and RSA，长度4096，邮箱填z3266420686202216…...
6.第六章：数据分类的技术体系
文章目录 6.1 数据分类的技术架构6.1.1 数据分类的整体流程6.1.2 数据分类的技术组件6.1.2.1 数据采集与预处理6.1.2.2 特征工程与选择6.1.2.3 分类模型构建6.1.2.4 模型评估与优化6.1.2.5 分类结果应用与反馈 6.2 数据分类的核心技术与算法6.2.1 传统机器学习算法6.2.2 深度学…...
Nginx 反向代理，啥是“反向代理“啊，为啥叫“反向“代理？而不叫“正向”代理？它能干哈？
Nginx 反向代理的理解与配置 User 我打包了我的前端vue项目，上传到服务器，在宝塔面板安装了nginx服务，配置了文件 nginx.txt .运行了项目。 我想清楚，什么是nginx反向代理？是nginx作为一个中介？中间件来集…...
下篇：深入剖析 BLE GATT / GAP / SMP 与应用层（约5000字）
引言 在 BLE 协议栈的最上层，GAP 定义设备角色与连接管理，GATT 构建服务与特征，SMP 负责安全保障，应用层则承载具体业务逻辑与 Profile。掌握这一层，可实现安全可靠的设备发现、配对、服务交互和定制化业务。本文将详解 GAP、GATT、SMP 三大模块，并通过示例、PlantUML 时…...
Linux Awk 深度解析：10个生产级自动化与云原生场景
看图猜诗，你有任何想法都可以在评论区留言哦~ 摘要 Awk 作为 Linux 文本处理三剑客中的“数据工程师”，凭借字段分割、模式匹配和数学运算三位一体的能力，成为处理结构化文本（日志、CSV、配置文件）的终极工具。本文聚…...
无人设备遥控之调度自动化技术篇
无人设备遥控器的调度自动化技术是现代科技发展的重要成果，它通过集成先进的通信、控制、传感器及人工智能技术，实现了对无人设备的高效、精准调度与自动化管理。 一、核心技术 无线通信技术 调度自动化依赖于高速、稳定的无线通信网络（如5…...
STM32F407 HAL库使用 DMA_Normal 模式实现 UART 循环发送（无需中断）
在 STM32 开发中，很多人喜欢使用 DMA 来加速串口发送数据。然而，默认的 DMA 往往配合中断或使用循环模式（DMA_CIRCULAR）使用。但在某些特定需求下，我们希望： 使用 DMA_NORMAL 模式，确保 DMA 每次…...
汽车自动驾驶介绍
0 Preface/Foreword 1 介绍 1.1 FSD FSD: Full Self-Driving，完全自动驾驶 （Tesla） 1.2 自动驾驶级别 L0 - L2：辅助驾驶L3：有条件自动驾驶L4/5 ：高度/完全自动驾驶...
Uniapp-小程序从入门到精通
沉淀UNIAPP项目精华模版 ******************************************************************************************************************************************* 1、数据库的导入SQL **************************************************************************…...
深度剖析操作系统核心（第一节）：从X86/ARM/MIPS处理器架构到虚拟内存、分段分页、Linux内存管理，再揭秘进程线程限制与优化秘籍，助你成为OS高手！
文章目录 OS处理器X86ARMMIPSPowerPC 内存管理虚拟内存内存分段内存分页段页式内存管理Linux 内存管理 OS 处理器 常见处理器有X86、ARM、MIPS、PowerPC四种。 X86 X86架构是芯片巨头Intel设计制造的一种微处理器体系结构的统称。如果这样说你不理解，那么当我说…...
基于 EFISH-SBC-RK3588 的无人机通信云端数据处理模块方案
一、硬件架构设计 核心计算单元（EFISH-SBC-RK3588） 异构计算能力：搭载 8 核 ARM 架构（4Cortex-A762.4GHz 4Cortex-A551.8GHz），集成 6 TOPS NPU 与 Mali-G610 GPU，支持多任务并行处理…...
)
Unity 内置Standard Shader UNITY_BRDF_PBS函数分析 (二)
四、BRDF1_Unity_PBS // 主物理基BRDF实现 // 基于Disney工作并以Torrance-Sparrow微面模型为基础 // 公式： // BRDF kD / π kS * (D * V * F) / 4 // I BRDF * (N L) // // * NDF（法线分布函数）可根据 UNITY_BRDF_GGX 选择&#…...
GitHub万星项目维护者分享：开源协作的避坑指南
GitHub万星项目维护者分享：开源协作的避坑指南 ——开发者张三与237个文件改动PR的五年战争 序幕：深夜的炸弹 2019年夏天，张三维护的开源项目TerminalX刚突破8000星，一个标题猩红的PR突然弹出：“彻底重构࿰…...
Linux基础篇、第四章_01软件安装rpm_yum_源码安装_二进制安装
Linux基础篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ ————laowang 基础命令：rpm、yum、源码安装、二进制安装 一、rpm本地安装： (无需网络安装，无法解决软件依赖) rpm -ivh …...
焊接机排错
焊接机 一、前定位后焊接 两个机台，①极柱定位，相机定位所有极柱点和mark点；②焊接机，相机定位mark点原理：极柱定位在成功定位到所有极柱点和mark点后，可以建立mark点和极柱点的关系。焊接机定位到mark点…...
4.2 Prompt工程与任务建模：高效提示词设计与任务拆解方法
提示词工程（Prompt Engineering）和任务建模（Task Modeling）已成为构建高效智能代理（Agent）系统的核心技术。提示词工程通过精心设计的自然语言提示词（Prompts），引导大型语…...
oracle 锁的添加方式和死锁的解决
DML锁添加方式 DML 锁可由一个用户进程以显式的方式加锁，也可通过某些 SQL 语句隐含方式实现。 DML 锁有三种加锁方式：共享锁方式、独占锁方式、共享更新。 共享锁，独占锁用于 TM 锁，共享锁用于 TX 锁。 1)共享方式的表级锁 共享方…...
Nginx 二进制部署与 Docker 部署深度对比
一、核心概念解析 1. 二进制部署 通过包管理器（如 apt/yum）或源码编译安装 Nginx，直接运行在宿主机上。其特点包括： 直接性：与操作系统深度绑定，直接使用系统库和内核功能 。定制化：支持通过…...
以太网的mac帧格式
一.以太网的mac帧 帧的要求 1.长度 2.物理层...
每日算法-250424
每日算法打卡 (24/04/25) - LeetCode 2971 & 1647 记录一下今天解决的两道 LeetCode 题目 2971. 找到最大周长的多边形 题目 思路 贪心 一个基本的多边形构成条件是：最长边必须小于其他所有边的长度之和。 为了找到周长最大的多边形，我们应该尽可能…...
在本地部署n8n：完整指南
n8n是一个强大的工作流自动化工具，可以帮助你连接不同的应用程序和服务，无需编写复杂的代码。本指南将带你完成在本地计算机上部署n8n的完整过程。 什么是n8n？ n8n（发音为"n-eight-n"）是一个开源的工作流自…...
棋盘格角点检测顺序问题
文章目录 前言一、OpenCV函数测试二、原因分析三、libcbdetect修改总结 前言 棋盘格角点检测在相机拼接、机械臂手眼标定中等应用很广泛，通常也要求尽量各种角度摆放从而保证标定精度。然后就自然想到了这个问题：如果棋盘格任意角度摆放怎么能对应上角点…...
C++之类和对象：定义，实例化，this指针，封装
C语言是面向过程的，C是面向对象的，利用对象交互，接口完成事情。 类的定义： 我们在C语言中可以用struct创建自定义结构体，在C中可以在结构体中定义函数了，这种就被称为类。 #include<iostream> usi…...
Ubuntu系统下交叉编译iperf3
一、参考资料 Linux下iperf3移植到arm下测试100M网口-CSDN博客 Iperf3移植到ARM Linux及使用教程-CSDN博客 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编…...