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

Web开发 -前端部分-CSS3新特性

news 2026/4/7 14:31:02

1 CSS概述

2 CSS3私有前缀

3 CSS3的长度单位

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: skyblue;}/* 视口宽度的百分比 viewport width *//* 视口高度的百分比 viewport height *//* 可以根据视口的变化而变化 */.box2 {width: 50vw;height: 20vh;background-color: blue;}/* vmax 取视口宽度 视口高度 两者之间的较大值作为标准 *//* vmin 取视口宽度 视口高度 两者之间的较小值作为标准 */</style>
</head><body><div class="box1">像素</div><div class="box2">vw和vh</div></body></html>

图形化展示：

4 新增颜色设置

5 新增选择器

6 新增盒子模型属性

1 box-sizing 怪异盒子模型

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {/* 内容的宽高 */width: 200px;height: 200px;background-color: skyblue;padding: 5px;border: 5px solid black;/* 将宽高改为整体的宽高 */box-sizing: border-box;}</style>
</head><body><div class="box1"></div>
</body></html>

图形化展示：

2 resize 调整盒子大小

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;overflow: auto;/* 水平方向上的长度调节 */resize: horizontal;/* 垂直方向上的长度调节 */resize: vertical;/* 两个方向都可以调节 */resize: both;}</style>
</head><body><div class="box1"></div>
</body></html>

3 box-shadow 盒子阴影

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 300px;height: 300px;background-color: green;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 参数：2个 水平 垂直 两个方向上的阴影 */box-shadow: 10px 10px;/* 参数：3个 水平 垂直 阴影颜色  */box-shadow: 10px 10px black;/* 参数：3个 水平 垂直 阴影模糊程度  */box-shadow: 10px 10px 10px;/* 参数：4个 水平 垂直 阴影模糊程度 阴影颜色 */box-shadow: 10px 10px 10px orange;/* 参数：5个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 */box-shadow: 10px 10px 10px 0px orange;/* 参数：6个 水平 垂直 阴影模糊程度 阴影外延 阴影颜色 内阴影*/box-shadow: 10px 10px 10px 0px orange inset;}</style></head><body><div class="box1">盒子阴影</div>
</body></html>

4 opacity 盒子不透明度

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: orange;font-size: 40px;/* 0为完全透明 1为透明 */opacity: 0.3;}</style></head>
<body><div class="box1">盒子不透明性</div></body>
</html>

7 新增背景属性

1 bcakground-origin背景原点

代码实现:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; }
</style><body><div class="box1">背景</div></body></html>

2 background-clip 背景裁剪

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {background-color: skyblue;width: 300px;height: 300px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 从哪一个区域开始铺图片 */background-origin: padding-box; /* 超出这个区域的内容不呈现 */background-clip: padding-box;}
</style><body><div class="box1">背景</div></body></html>

3 background-size 背景尺寸

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 400px;height: 400px;border: 1px solid black;background-image: url(../../HTML/QQ图片20240919174729.jpg);background-repeat: no-repeat;/* 将图片完整的呈现出来 */background-size: contain;}</style></head><body><div class="box1">背景属性</div>
</body></html>

4 background-xxx 复合属性

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box1 {width: 400px;height: 400px;margin: 0 auto;margin-top: 20px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.4);font-size: 30px;/* background: 背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式; */background: skyblue url(../../HTML/QQ图片20240919174729.jpg) no-repeat 10px 10px / 500px 500px border-box content-box;background-size: contain;}
</style><body><div class="box1">背景</div></body></html>

图形化展示：

5 多背景图

代码实现：

Web开发 -前端部分-CSS3新特性

1 CSS概述 2 CSS3私有前缀 3 CSS3的长度单位代码实现： <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2025/1/22 17:24:47

【基础篇】什么是SQL注入，如何防止？

什么是 SQL 注入，如何防止？ SQL 注入（SQL Injection）是一种常见的网络安全漏洞，它发生在 Web 应用程序中，当恶意用户在输入数据时，将恶意的 SQL 代码插入到输入中，从而导致应用程序…...

编程日记 2025/1/22 17:19:41

Swift语言的数据结构

Swift语言的数据结构 Swift是一种现代化的编程语言，它以安全性、性能和简洁性著称。尽管Swift通常被视为面向对象的语言，但它也支持函数式编程的特性，使得开发者可以以多种方式构建应用程序。在Swift中，数据结构是编程的基础&…...

编程日记 2025/1/22 17:18:38

牛客周赛 Round 77

题目链接：牛客周赛 Round 77 A. 时间表 tag：签到 B. 数独数组 tag：签到 Description：给定n个数，每个数的范围为1-9，问能否经过排列，使其每个长度为9的连续子数组都包含1-9这9个数字。 Sol…...

编程日记 2025/1/22 17:17:36

浅谈云端编辑器，分析其亮点与不足

浅谈云端编辑器，分析其亮点与不足这个云端编辑器界面可以分为左侧题目筛选栏、中间题目描述与代码编辑区域、右侧AI提示功能三部分。以下是详细的分析： 1. 左侧题目筛选栏层次结构清晰：左侧栏展示了一个层级结构，题目按主题分…...

编程日记 2025/1/22 17:11:28

web应用引入cookie机制的用途和cookie技术主要包括的内容

web应用引入cookie机制，用于用户跟踪。 （1）HTTP响应报文中的Cookie头行：set-Cookie （2）用户浏览器在本地存储、维护和管理的Cookie文件 （3）HTTP请求报文中的Cookie头行：…...

编程日记 2025/1/22 17:06:09

【HTML+CSS】使用HTML与后端技术连接数据库

目录一、概述 1.1 HTML前端 1.2 后端技术 1.3 数据库二、HTML表单示例三、PHP后端示例 3.1 连接数据库 3.2 接收数据并插入数据库四、安全性 4.1 防止SQL注入 4.2 数据验证与清洗五、优化 5.1 索引优化 5.2 查询优化六、现代Web开发中的最佳实践 6.1 使用…...

编程日记 2025/1/22 17:04:51

「2024·我的成长之路」：年终反思与展望

文章目录 1. 前言2.创作历程2.1 摆烂期2.2 转变期3. 上升期 2. 个人收获3.经验分享4. 展望未来 1. 前言 2025年1月16日，2024年博客之星入围公布，很荣幸获得了这次入围的机会。2024年对我个人是里程碑的一年，是意义非凡的一年，是充…...

编程日记 2025/1/22 16:57:41

using PaddleOCRSharp;namespace PaddleOCRSharpDemo {internal class Program{static void Main(string[] args){//中英文模型V3模型OCRModelConfig config null;//OCR参数OCRParameter oCRParameter new OCRParameter();oCRParameter.cpu_math_library_num_threads 6;//预…...

编程日记 2025/1/22 16:52:22

【Excel】【VBA】Reaction超限点筛选与散点图可视化

【Excel】【VBA】Reaction超限点筛选与散点图可视化功能概述这段代码实现了以下功能： 从SAFE输出的结果worksheet通过datalink获取更新数据从指定工作表中读取数据检测超过阈值的数据点生成结果表格并添加格式化创建可视化散点图显示执行时间流程图 #mermaid-…...

编程日记 2025/1/22 16:50:13

京华春梦，守岁这方烟火人间

文章目录准备篇温度公共交通人流情况年货采购文化体验传统庙会博物馆与展览烟花灯会祈福仪式民俗集市现代氛围其他活动美食盛宴传统美食与特色小吃传统老字号京城新宠特色小吃街多元美食街准备篇温度北京春节期间气温较低，室外通常在零下几度到零上几度之间…...

编程日记 2025/1/22 16:46:06

学Python的人…

学Python的人… 一、Python能干什么？ 1.爬虫：前几年，深度学习还没发展起来的时候，书店里Python就和爬虫挂钩，因为Python写爬虫确实方便。 2.数据分析：Python有各种的数据分析库可以方便使用&#xff0…...

编程日记 2025/1/22 16:38:57

WebSocket 和 Socket 的区别

一、协议层次和工作方式 1.1 ）Socket 1.1.1）Socket位于传输层，通常使用TCP或UDP协议 1.1.2）提供了一个通用的网络编程接口，允许应用程序通过它发送和接收数据 1.1.3）一般需要手动管理连接，错…...

编程日记 2025/1/22 16:35:53

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证6）

重新创建WebApi项目，安装Microsoft.AspNetCore.Authentication.JwtBearer包，将之前JwtBearer测试项目中的初始化函数，jwt配置类、token生成类全部挪到项目中。重新编写login函数，之前测试Cookie和Session认证时用的函数适合m…...

编程日记 2025/1/22 16:34:50

【SpringBoot】SpringBoot中分页插件（PageHelper）的使用

目录 1.分页概念 2.原生写法 3.PageHelper插件分页查询 3.1 介绍 3.2?使用 3.3 Page对象和PageInf对象 1.分页概念用户查询的数据不可能一次性全部展示给用户（如果用户有一万条数据呢），而是分页展示给用户，这就是分页查询…...

编程日记 2025/1/22 16:33:48

【优选算法】4----盛最多水的容器

开始有点上强度了铁子们，这道算法题也是可以说很难理解的~ 想了好久才想明白~ ---------------------------------------begin--------------------------------------- 题目解析： 这一道题刚看题目，根本不知道在讲啥，但看到体积…...

编程日记 2025/1/22 16:32:46

EDI安全：2025年数据保护与隐私威胁应对策略

在数字化转型的浪潮中，电子数据交换（EDI）已成为企业间信息传递的核心基础设施。然而，随着数据规模的指数级增长和网络威胁的日益复杂化，EDI安全正面临前所未有的挑战。展望2025年，企业如何构建一套全面、高…...

编程日记 2025/1/22 16:30:44

代码随想录刷题day13|（链表篇）24.两两交换链表中的结点

目录一、链表理论基础二、思路及易错点易错点三、相关算法题目四、错误代码分析一、链表理论基础代码随想录 (programmercarl.com) 二、思路及易错点该题使用虚拟头结点正常进行模拟即可，有两个关键点，一是循环何时终止？终止…...

编程日记 2025/1/22 16:18:28

集群、分布式及微服务间的区别与联系

目录单体架构介绍集群和分布式架构集群和分布式集群和分布式区别和联系微服务架构的引入微服务带来的挑战总结单体架构介绍早期很多创业公司或者传统企业会把业务的所有功能实现都打包在一个项目中，这种方式就称为单体架构以我们都很熟悉的电商系统为例&…...

编程日记 2025/1/22 16:16:25

MySQL（4）多表查询

引言：为什么需要多表的查询？ A：提高效率，多线进行。高内聚、低耦合。一、多表查询的条件 1、错误的多表查询： SELECT employee_id,department_name FROM employees,departments; SELECT employee_id,department…...

编程日记 2025/1/22 16:14:16

别再只写Prompt了！用Cursor Skills给你的AI助手装上‘前端设计说明书’

别再只写Prompt了！用Cursor Skills给你的AI助手装上‘前端设计说明书’ 作为一名长期与AI代码生成工具打交道的前端开发者，我深刻理解那种面对千篇一律的"AI感"设计时的无奈。每次都要花费大量时间编写冗长的Prompt，结果生成的代码…...

编程新知 2026/4/7 14:19:55

Qwen3-ForcedAligner在嵌入式设备上的轻量化部署

Qwen3-ForcedAligner在嵌入式设备上的轻量化部署 1. 引言语音识别技术正在从云端走向边缘，越来越多的应用场景需要在资源受限的嵌入式设备上实现实时语音处理。传统的强制对齐方案往往需要强大的计算资源，这在嵌入式环境中成为了一个巨大的挑战。 Qw…...

编程新知 2026/4/7 14:05:50

猫抓浏览器扩展：轻松获取网页媒体资源的终极指南

猫抓浏览器扩展：轻松获取网页媒体资源的终极指南【免费下载链接】cat-catch 猫抓浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为无法下载网页视频而烦恼吗&…...

编程新知 2026/4/7 12:52:33

Azure DevOps 自托管 Agent 如何用 Service Principal 安全接入 Azure

Azure DevOps 使用服务主体配置自托管代理配置指南1. 概述2. 在 Azure AD 中创建服务主体 (SP)3. 授予 Azure DevOps 权限3.1. 组织层级：用户身份与访问级别3.2. 组织层级：Agent pools管理员3.3. 在 Linux VM 上安装和配置代理3.4. 启动并设置为系统服务…...

编程新知 2026/4/7 12:13:58