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

CSS3 基础知识、原理及与CSS的区别

news 来源：原创 2025/7/12 23:39:41

CSS3 基础知识、原理及与CSS的区别

CSS3 基础知识

CSS3 是 Cascading Style Sheets 的第3个版本，是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。

CSS3 主要模块

选择器：更强大的元素选择方式
盒模型：更灵活的布局控制
背景和边框：圆角、阴影、渐变等效果
文字效果：文字阴影、换行控制等
2D/3D转换：旋转、缩放、移动等
动画：过渡和关键帧动画
多列布局：创建多列文本布局
用户界面：调整大小、盒大小等

CSS3 与 CSS 的主要区别

特性	CSS	CSS3
模块化	单一规范	分为多个独立模块
选择器	基础选择器	新增属性选择器、伪类等
圆角边框	不支持	border-radius
阴影	不支持	box-shadow, text-shadow
渐变	不支持	linear-gradient, radial-gradient
动画	不支持	transition, animation
媒体查询	不支持	@media
多背景	不支持	支持多个背景图像
弹性布局	不支持	Flexbox
网格布局	不支持	Grid

CSS3 核心原理

渐进增强：CSS3 设计允许浏览器逐步支持新特性，不支持的浏览器会优雅降级
硬件加速：某些CSS3特性(如transform)会使用GPU加速，提高性能
模块化设计：不同功能被划分为独立模块，可以单独开发和实现
响应式设计：媒体查询等功能为响应式设计提供了基础

CSS3 案例

1. 圆角边框 (border-radius)

.box {width: 200px;height: 100px;background-color: #3498db;border-radius: 10px; /* 四个角 */border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

2. 阴影效果 (box-shadow)

.card {width: 300px;padding: 20px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);/* 水平偏移 垂直偏移 模糊半径 颜色 */
}

3. 渐变背景 (gradient)

.gradient-bg {background: linear-gradient(to right, #ff7e5f, #feb47b);/* 也可以使用径向渐变 radial-gradient */
}

4. 过渡效果 (transition)

.button {background: #2ecc71;transition: background 0.3s ease;
}
.button:hover {background: #27ae60;
}

5. 动画 (animation)

@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {animation: bounce 2s infinite;
}

6. 2D转换 (transform)

.element {transform: rotate(45deg) scale(1.2);/* 还可以使用 skew(), translate() 等 */
}

7. 媒体查询 (media query)

/* 当屏幕宽度小于600px时应用这些样式 */
@media (max-width: 600px) {.menu {display: none;}.mobile-menu {display: block;}
}

8. Flexbox 布局

.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;
}

9. Grid 布局

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;
}.grid-item {background: #eee;padding: 20px;
}

10. 多列布局

.multi-column {column-count: 3;column-gap: 20px;column-rule: 1px solid #ddd;
}

浏览器兼容性考虑

虽然CSS3提供了许多强大的功能，但在实际开发中需要考虑浏览器兼容性。可以使用以下方法：

前缀处理：使用Autoprefixer等工具自动添加浏览器前缀

.box {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);
}

特性检测：使用@supports规则

@supports (display: grid) {/* 支持grid时的样式 */
}

渐进增强：先确保基本功能可用，再添加CSS3增强效果

CSS3极大地丰富了网页的表现力，使得开发者能够创建更加丰富、动态的网页效果，同时保持代码的简洁性和可维护性。

CSS3 基础知识、原理及与CSS的区别

CSS3 基础知识、原理及与CSS的区别 CSS3 基础知识 CSS3 是 Cascading Style Sheets 的第3个版本，是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。 CSS3 主要模块选择器：更强大的元素选择方式盒…...

编程日记 2025/7/12 23:39:41

第十七章：Llama Factory 深度剖析：易用性背后的微调框架设计

章节引导：在模型定制的实践中，Llama Factory (github.com/hiyouga/LLaMA-Factory) 以其惊人的易用性和对多种开源大模型、多种参数高效微调方法（PEFT）的广泛支持，迅速成为开源社区的热门选择。你可能已经熟练掌握了如何…...

编程日记 2025/6/29 0:14:18

SpringSecurity当中的CSRF防范详解

CSRF防范什么是CSER 以下是基于 CSRF 攻击过程的顺序图及详细解释，结合多个技术文档中的攻击流程： CSRF 攻击顺序图 #mermaid-svg-FqfMBQr8DsGRoY2C {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#m…...

编程日记 2025/6/29 0:50:10

CSRF防范歪招

不保存到Cookie里呗如果每次请求都强制通过请求头携带Token，并且不将Token存储在Cookie中，这种设计可以有效防御CSRF攻击。以下是具体原因和关键实现要点： 1. 防御原理 CSRF攻击的本质是攻击者伪造用户的请求，利用浏览器自动携…...

编程日记 2025/7/12 23:36:27

MyBatis与MyBatis-Plus深度分析

MyBatis与MyBatis-Plus深度分析一、MyBatis原理与基础 1. MyBatis核心原理 MyBatis是一个半自动ORM框架，主要原理包括： SQL与代码分离：通过XML或注解配置SQL语句动态SQL：提供if、choose、foreach等标签实现动态SQL结果集映射…...

编程日记 2025/6/29 1:08:18

STM32 变量加载到flash的过程中

在STM32中，BIN文件内需要加载到RAM的数据由链接脚本（Linker Script）和启动代码（Startup Code）共同决定，具体机制如下： 一、BIN文件内容结构 STM32的BIN文件包含三类数据： Co…...

编程日记 2025/7/12 23:35:28

TCP核心机制

1. TCP五大核心机制 1.1. 顺序问题（稳重不乱） 背景：网络传输中数据包可能因路径不同或网络波动导致乱序到达，需保证接收方能按正确顺序处理数据。原理： 序列号（Sequence Number）&#xff1…...

编程日记 2025/6/29 0:44:59

6.3对象序列化

在 Java 中，ObjectInputStream 和 ObjectOutputStream 是用于实现对象序列化（Serialization）和反序列化（Deserialization）的核心类。通过这两个类，可以将对象转换为字节流进行存储或传输，并在需…...

编程日记 2025/7/12 23:38:02

Flutter小白入门指南

Flutter小白入门指南 🚀 轻松构建漂亮的跨平台应用 📑 目录一、Flutter是什么？ 为什么选择Flutter？Flutter工作原理二、环境搭建与命令行安装Flutter SDK常用Flutter命令创建第一个项目三、Flutter基础语法变量与类型函数条…...

编程日记 2025/6/28 23:04:43

Python -将MP4文件转为GIF图片

给大家提供一个工具代码，使用Python，将MP4格式的视频文件，转换为GIF图片首先先安装必要的包： pip install imageio pip install imageio[ffmpeg] 工具代码： import imageio# 视频文件路径 video_path r""…...

编程日记 2025/7/12 23:38:01

51c嵌入式~电路~合集27

我自己的原文哦~ 一、7805应用电路简介如上图，7805 集成稳压电路。 7805是串联式三端稳压器，三个端口分别是电压输入端（IN），地线（GND），稳压输出（OUT）…...

编程日记 2025/6/29 1:12:46

数据结构—(链表，栈，队列，树)

本文章写的比较乱，属于是缝合怪，很多细节没处理，显得粗糙，日后完善，今天赶时间了。 1. 红黑树的修复篇章 2. 红黑树的代码理解（部分写道注释之中了） 3. 队列与栈的代码 4. 重要是理解物理逻辑&a…...

编程日记 2025/6/29 0:49:59

GitHub 趋势日报 (2025年05月12日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1harry0703/MoneyPrinterTurbo利用ai大模型，一键生成高清短视频使用…...

编程日记 2025/6/29 0:35:43

ebook2audiobook开源程序使用动态 AI 模型和语音克隆将电子书转换为带有章节和元数据的有声读物。支持 1,107+ 种语言

一、软件介绍文末提供程序和源码下载 ebook2audiobook开源程序使用动态 AI 模型和语音克隆将电子书转换为带有章节和元数据的有声读物。支持 1,107 种语言。从电子书到带有章节和元数据的有声读物的 CPU/GPU 转换器，使用 XTTSv2、Bark、Vits、Fairseq、YourTTS …...

编程日记 2025/6/29 0:13:00

《算法导论(第4版)》阅读笔记：p39-p48

《算法导论(第4版)》学习第 13 天，p39-p48 总结，总计 10 页。一、技术总结 1. recurrence/recurrence equation 书里面 recurrence(递归式) 和 recurrence equation(递归方程) 指的是同一个东西。二、英语总结(生词：2) 1. squint (1)…...

编程日记 2025/6/28 23:24:28

c语言第一个小游戏：贪吃蛇小游戏07

贪吃蛇吃饭喽所谓贪吃蛇的食物，也就是创建一个和蛇身一样的结构体，只是这个结构体不是链表，也是将这个结构体设置hang和lie坐标，放进gamepic进行扫描，扫到了就也是做操作将 ## 打出来 #include <curses.h> #i…...

编程日记 2025/6/28 23:04:41

（七）深度学习---神经网络原理与实现

分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机场贝叶斯层次聚类隐马尔可夫模型支持向量机高斯混合聚类LDA主题模型一.神经网络原理概述二.神经网络的训练方法三.基于Ker…...

编程日记 2025/6/29 0:52:25

VSCode中Node.js 使用教程

一、visual studio code下载与安装二、修改vscode主题颜色三、汉化菜单view-->Command Palette...,输入Configure Display Language。重启之后如下： 四、安装node.js Node.js 是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动、非阻…...

编程日记 2025/6/28 23:09:25

web 自动化之 KDT 关键字驱动详解

一、什么是关键字驱动？ 1、什么是关键字驱动？（以关键字函数驱动测试） 关键字驱动又叫动作字驱动，把项目业务封装成关键字函数，再基于关键字函数实现自动化测试 2、关键字驱动测试原理关键字驱动测试是一…...

编程日记 2025/6/28 23:13:07

文章目录一、yaml 数据获取二、日志获取三、截图一、yaml 数据获取需要安装 PyYAML 库 import yaml import os from TestPOM.common import dir_config as Dirdef read_yaml(key,file_name"test_datas.yaml"):file_path os.path.join(Dir.testcases_dir, file_…...

编程日记 2025/6/28 23:27:56

基于javaweb的SpringBoot酒店管理系统设计与实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/6/29 1:30:05

数学复习笔记 6

前言复习一下行列式的一些基本的题。感觉网课有点没跟上了。今天花点时间跟上网课的进度。要紧跟进度，然后剩下的时间再去复习前面的内容。多复习，提升自己的解题能力。行列式和矩阵三年级，我现在是三年级下册。。。马上就要结束大学的…...

编程日记 2025/6/29 0:40:01

JS Map使用方法

JS Map使用方法 Map 是 ES6 引入的一种新的数据结构，它类似于对象（Object），但提供了更强大的键值对存储功能。文章目录 JS Map使用方法基本特性基本用法创建 Map常用方法遍历方法与 Object 的区别实际应用示例示例1&#xff1a…...

编程日记 2025/6/29 1:14:58

大模型分布式光伏功率预测实现详解

一、引言随着全球能源结构向可再生能源转型，光伏发电作为清洁能源的重要组成部分，其装机容量持续快速增长。然而，光伏发电具有显著的间歇性和波动性特点，给电力系统的稳定运行带来了巨大挑战。准确的光伏功率预测对于电网调度、电力市场交易和电站运营管理至关重要。近年…...

编程日记 2025/6/28 23:04:46

武汉大学无人机视角下的多目标指代理解新基准！RefDrone：无人机场景指代表达理解数据集

作者：Zhichao Sun, Yepeng Liu, Huachao Zhu, Yuliang Gu, Yuda Zou, Zelong Liu, Gui-Song Xia, Bo Du, Yongchao Xu 单位：武汉大学计算机学院论文标题：RefDrone: A Challenging Benchmark for Drone Scene Referring Expression Compreh…...

编程日记 2025/6/28 23:26:05

【LLM模型】如何构建自己的MCP Server？

什么是 MCP？ Model Context Protocol (MCP) 是一种协议，它允许大型语言模型（LLMs）访问自定义的工具和服务。Trae 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求，以使用它们提供的工具。你可以自行添加 MC…...

编程日记 2025/6/29 0:41:10

SQL 索引优化指南：原理、知识点与实践案例

SQL 索引优化指南：原理、知识点与实践案例索引的基本原理索引是数据库中用于加速数据检索的数据结构，类似于书籍的目录。它通过创建额外的数据结构来存储部分数据，使得查询可以快速定位到所需数据而不必扫描整个表。索引的工作原理 B-…...

编程日记 2025/6/28 23:13:05

java基础-方法的重写、super关键字

1.定义：子类可以根据需要改写从父类那继承来的方法，执行时，子类的方法会覆盖父类的方法 2.要求： （1）子类和父类的方法必须同名，同参数列表 （2）父类中private修饰的方法…...

编程日记 2025/6/28 23:04:48

技术并不能产生一个好的产品

技术是产生一个好的产品充分条件，不是必要条件。当笔者到了40岁的年龄时间，发现再怎么努力提升技术，也没办法挽救烂的产品设计。一个好的产品，首先要找准自己的定位，不能动不动就把自己拿一线品牌来比较。好的产品…...

编程日记 2025/6/29 1:04:21

lubuntu 系统详解

Lubuntu 系统详解：轻量高效的 Ubuntu 衍生版一、系统概述定位与背景： Lubuntu 是 Ubuntu 的官方衍生版本（Flavor），专注于轻量性与高效性，旨在为低配置设备（如老旧电脑、上网本、低配笔记本 …...

编程日记 2025/6/28 23:58:19

《设备管理与维修》审核严吗？“修改后再投”是拒稿了吗？

有过论文投稿经验的朋友，可能在审核后收到过“修改后再投”的回复。有些期刊可能是真的建议投稿人在修改后再投稿，有些则可能是标准的拒稿模板。《设备管理与维修》审核严吗？收到“修改后再投”的回复该怎么办？下面我就来分享下之…...

编程日记 2025/6/28 23:13:00

2025年5月-信息系统项目管理师高级-软考高项一般计算题

决策树和期望货币值加权算法自制和外购分析沟通渠道三点估算PERT 当其他条件一样时，npv越大越好...

编程日记 2025/6/29 1:15:04

界面组件DevExpress WPF中文教程：Grid - 如何自定义Band Header外观？

DevExpress WPF拥有120个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件…...

编程日记 2025/6/28 23:19:07

Supabase 的入门详细介绍

Supabase 是什么？ 简单来说，Supabase 是一个开源的 Firebase 替代品。它提供了一整套后端即服务 (BaaS - Backend as a Service) 的工具，让你能够快速构建应用程序的后端，而无需自己从头搭建和管理服务器、数据库等基础设施。 S…...

编程日记 2025/6/29 0:59:07

【实战】基于 ABP vNext 构建高可用 S7 协议采集平台（西门子 PLC 通信全流程）

🚀🔧【实战】基于 ABP vNext 构建高可用 S7 协议采集平台（西门子 PLC 通信全流程）📊 📑 目录 🚀🔧【实战】基于 ABP vNext 构建高可用 S7 协议采集平台（西门子 PLC 通信全…...

编程日记 2025/6/29 0:23:56

20、map和set、unordered_map、un_ordered_set的复现

一、map 1、了解 map的使用和常考面试题等等，看这篇文章 map的key是有序的 ，值不可重复。插入使用 insert的效率更高，而在"更新map的键值对时，使用 [ ]运算符效率更高。" 注意 map 的lower和upper那2个函数&#x…...

编程日记 2025/6/29 0:58:26

leetcode 189. 轮转数组

题目描述代码： class Solution { public:void rotate(vector<int>& nums, int k) {int len nums.size();k k % len;reverse(nums,0,len-1);reverse(nums,0,k-1);reverse(nums,k,len-1);}void reverse(vector<int>& nums,int left,int right…...

编程日记 2025/6/29 0:40:46

得物0509面试手撕题目解答

题目使用两个栈（一个无序栈和一个空栈）将无序栈中的元素转移到空栈，使其有序，不允许使用其他数据结构。示例：输入：[3, 1, 6, 4, 2, 5]，输出：[6, 5, 4, 3, 2, 1] 思路与代码如…...

编程日记 2025/6/28 23:54:06

8天Python从入门到精通【itheima】-6~10

目录 7节-开发出第一个Python程序： 1.在cmd窗口写下第一个最简单的程序：Hello World!!! 9节： 1.如何卸载python： 2.报错：不是可运行的程序编辑 3.报错：无法初始化设备PRN： 4.报错&…...

编程日记 2025/6/29 0:23:17

Qt —— 使用Enigma Virtual Box将Qt程序打包为独立可运行exe（附：完整打包方法且完美运行）

🔔 Qt 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）打包结果 1、如下图，准备好Qt已打包后程序文件夹。附 Qt —— 在Windows下打包Qt应用程序（在其他Windows电脑下使用）...

编程日记 2025/6/28 23:47:22

大语言模型RLHF训练框架全景解析：OpenRLHF、verl、LLaMA-Factory与SWIFT深度对比

引言随着大语言模型（LLM）参数规模突破千亿级，基于人类反馈的强化学习（RLHF）成为提升模型对齐能力的关键技术。OpenRLHF、verl、LLaMA-Factory和SWIFT作为开源社区的四大标杆框架，分别通过分布式架构、混合…...

编程日记 2025/6/29 1:02:34

VTK|类似CloudCompare的比例尺实现1-源码分析

文章目录 CloudCompare源码分析void ccGLWindowInterface::drawScale(const ccColor::Rgbub& color)🧩 总体功能🧠 函数逐步解析✅ 1. 断言只在正交模式下使用✅ 2. 计算显示的实际长度✅ 3. 字体和图形区域准备✅ 4. 计算比例尺图形的绘制位置✅ 5.…...

编程日记 2025/6/29 0:50:50

【计算机视觉】OpenCV实战项目：基于Tesseract与OpenCV的字符识别系统深度解析

基于Tesseract与OpenCV的字符识别系统深度解析 1. 项目概述2. 技术原理与算法设计2.1 图像预处理流水线1) 形态学操作2) 自适应阈值 2.2 Tesseract OCR引擎 3. 实战部署指南3.1 环境配置3.2 项目结构优化建议3.3 增强版代码实现 4. 常见问题与解决方案4.1 Tesseract路径错误4.2…...

编程日记 2025/6/29 0:22:24