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

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

news 2026/2/10 1:32:23

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的长度单位 代码实现&#xff1a; <!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 注入&#xff0c;如何防止&#xff1f; SQL 注入&#xff08;SQL Injection&#xff09;是一种常见的网络安全漏洞&#xff0c;它发生在 Web 应用程序中&#xff0c;当恶意用户在输入数据时&#xff0c;将恶意的 SQL 代码插入到输入中&#xff0c;从而导致应用程序…...

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

Swift语言的数据结构

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

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

牛客周赛 Round 77

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

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

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

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

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

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

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

编程日记 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日&#xff0c;2024年博客之星入围公布&#xff0c;很荣幸获得了这次入围的机会。2024年对我个人是里程碑的一年&#xff0c;是意义非凡的一年&#xff0c;是充…...

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

C#PaddleOCRSharp使用

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

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

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

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

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

学Python的人…

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

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

WebSocket 和 Socket 的区别

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

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

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

重新创建WebApi项目&#xff0c;安装Microsoft.AspNetCore.Authentication.JwtBearer包&#xff0c;将之前JwtBearer测试项目中的初始化函数&#xff0c;jwt配置类、token生成类全部挪到项目中。   重新编写login函数&#xff0c;之前测试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.分页概念 用户查询的数据不可能一次性全部展示给用户&#xff08;如果用户有一万条数据呢&#xff09;&#xff0c;而是分页展示给用户&#xff0c;这就是分页查询…...

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

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

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

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

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

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

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

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

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

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

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

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

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

MySQL（4）多表查询

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

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

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42