css3 新增属性/滤镜效果/裁剪元素/图片适应盒子/定义和使用变量/恢复默认initial

news2025/6/4 18:49:01

从 CSS3 发布至今，CSS 标准引入了大量新特性，极大地丰富了前端开发的能力。以下是 CSS3 之后的重要新增属性、模块与特性总结，涵盖布局、动画、交互、视觉、选择器、单位等多个领域。

🎨 视觉与效果增强

属性/功能作用示例
filter滤镜效果（模糊、灰度等）filter: blur(5px) grayscale(50%);
backdrop-filter背景模糊、滤镜（玻璃拟态）backdrop-filter: blur(10px);
mix-blend-mode图层混合模式mix-blend-mode: multiply;
mask / mask-image蒙版裁剪元素形状mask-image: url(mask.svg);
clip-path裁剪元素形状clip-path: circle(50% at center);
object-fit图片适应盒子object-fit: cover;
object-position图片位置object-position: center;

📐 新布局模块

1️⃣ 弹性盒子（Flexbox）
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
2️⃣ 网格布局（Grid Layout）
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
gap: 10px;
尺寸控制
属性作用示例
min-content内容最小宽度width: min-content;
max-content内容最大宽度width: max-content;
fit-content()内容适配宽度width: fit-content(300px);
aspect-ratio固定宽高比aspect-ratio: 16 / 9;
1️⃣ min-content & max-content
<div class="box">一段很长很长的文字，不想换行。</div>
.box {
  width: min-content;
  background: lightblue;
  border: 1px solid #333;
}
  • min-content：元素的最小尺寸（不换行情况下内容的最小宽度）。
  • max-content：元素的最大尺寸（内容完全展开的宽度）。

对比示例

<div class="box1">一段很长很长的文字，不想换行。</div>
<div class="box2">一段很长很长的文字，不想换行。</div>
.box1 {
  width: min-content;
}

.box2 {
  width: max-content;
}
  • min-content 会尽可能缩小。
  • max-content 会完全展开内容宽度
2️⃣ fit-content()
width: fit-content(<length>);
  • ：可选的最大宽度。
.card {
  width: fit-content(300px);
  background: lightgreen;
  padding: 10px;
}
  • 内容会根据实际大小撑开，但不会超过 300px。
3️⃣ aspect-ratio
<div class="video-box"></div>
.video-box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background: #ccc;
}
  • 宽度固定 300px，高度会自动按比例计算为 300 / 16 * 9 = 168.75px。

响应式示例

.video-box {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}
  • 这样可以自适应宽度，保持比例不变，非常适合视频、图片容器。
intrinsic-size（实验性 用于设置内容的本体尺寸，影响容器查询和布局。
.box {
  width: 100cqi;
  height: 100cqi;
  intrinsic-size: 300px 200px;
}

目前支持度较低，主要用于布局优化。

5️⃣ contain-intrinsic-size（实验性）

为 contain 元素设置默认尺寸，用于性能优化（避免布局抖动）。

.lazy-box {
  contain: layout;
  contain-intrinsic-size: 300px 200px;
}

让浏览器提前知道尺寸，有利于提升渲染性能。

总结
功能用途示例场景
min-content最小宽度内容撑开表格列、按钮、标签
max-content最大内容宽度自适应文本块
fit-content()灵活自适应+限制最大宽度卡片、弹窗、菜单
aspect-ratio固定比例容器视频、图片、轮播、响应式盒子
contain-intrinsic-size性能优化懒加载内容、虚拟滚动容器

🧮 新单位

单位含义示例
vh/vw视口宽高百分比（1%）width: 50vw;
vmin/vmax视口最小/最大边font-size: 3vmin;
frGrid 中的分数单位grid-template-columns: 1fr 2fr;
ch字符宽度单位（数字 0 的宽度）width: 30ch;
exx 高度单位（小写 x 的高度）line-height: 2ex;

🖋️ 字体与文本

属性/功能作用示例
@font-face自定义字体@font-face { font-family: xxx; }
font-variation-settings可变字体属性调整font-variation-settings: "wght" 700;
hyphens自动断词hyphens: auto;

🎬 动画与交互

属性/功能作用示例
@keyframes / animation关键帧动画animation: fadeIn 1s ease;
transition过渡动画transition: all 0.3s ease;
will-change提前优化性能提示will-change: transform;
scroll-behavior平滑滚动scroll-behavior: smooth;
scroll-snap-type滚动吸附scroll-snap-type: x mandatory;

🎨 新颜色功能

属性/函数作用示例
rgba() / hsla()透明度/色相饱和度亮度模式background: rgba(255,0,0,0.5);
hwb()色相白度黑度color: hwb(120 0% 0%);
color-mix()颜色混合color: color-mix(in srgb, red 30%, blue);
color()高级颜色管理（P3色域等）color: color(display-p3 1 0 0);

🧩 新选择器

选择器作用示例
:not()排除某个选择器div:not(.active)
:is()简化多个选择器:is(h1, h2, h3) {}
:where()不增加权重的 is():where(section, article) {}
:has()父选择器（条件选择器）div:has(img)

🧭 定位与滚动

属性作用示例
position: sticky粘性定位position: sticky; top: 0;
anchor-position锚点定位（新特性）position-anchor: --marker;
container-type容器查询布局（新特性）container-type: inline-size;

🎛️ 其他新特性

特性/模块作用示例
CSS 变量 (Custom Properties)定义和使用变量--main-color: red; color: var(--main-color);
calc()动态计算width: calc(100% - 50px);
CSS NestingCSS 原生嵌套div { &.active { color: red; } }
CSS HoudiniCSS 低级 API（扩展 CSS 功能）CSS.paintWorklet.addModule('...');

什么是 CSS 变量？

  • CSS 变量（Custom Properties） 是一种可以在 CSS 中定义、复用、动态调整的值
  • 通常我们会在 :root 选择器中定义全局变量：
:root {
  --main-color: #4CAF50;
  --secondary-color: #FF5722;
  --font-size: 16px;
}

在局部定义（作用域内定义）
你也可以在某个选择器内定义，只在该选择器及其子元素生效

.button {
  --btn-color: blue;
}

.button {
  background-color: var(--btn-color);
}
  • 🚀 使用变量
h1 {
  color: var(--main-color);
  font-size: var(--font-size);
}

.button {
  background-color: var(--btn-color, green); /* 提供默认值 */
}

总结

功能语法示例
定义变量--变量名: 值;--main-color: red;
使用变量var(--变量名)color: var(--main-color);
默认值var(--变量名, 默认值)color: var(--unknown, black);
局部变量在某个选择器下定义.btn { --btn-color: blue; }
全局变量在 :root 中定义:root { --font-size: 16px; }
结合 JS 使用element.style.setProperty('--var', value)document.documentElement.style.setProperty('--main-color', '#333');

其他

width: fit-content 的含义

  • 元素的宽度会根据内容的宽度自动调整，但同时会受到 min-width 和 max-width 的限制。
  • 它的行为类似于说：“这个盒子刚好包住里面的内容，不多也不少。”
属性含义使用场景
width: fit-content宽度刚好适应内容，按需调整适合小块内容（如标签、按钮），不适合表格大布局
width: 100%撑满父容器适合全屏布局、容器布局
min-width设置最小宽度适合防止过小的内容收缩
max-width设置最大宽度适合防止内容过大撑破布局

样式恢复默认initial

关键字作用示例
unset恢复到继承的状态（如果可继承），否则恢复初始color: unset;
initial恢复到浏览器默认值（规范的初始值）margin: initial;
inherit强制继承父元素font-size: inherit;

1️⃣ 通过覆盖样式“删除”

  • 原样式
..box {
  color: red;
  background-color: yellow;
}

覆盖掉
.box {
  color: initial;             /* 恢复默认 */
  background-color: transparent; /* 清空背景 */
}
或者完全覆盖：

.box {
  all: unset;
}

3️⃣ 彻底移除样式（通过覆盖 all）

.box {
  all: unset;
}
  • all 是 CSS 的全局属性，可以一次性移除所有样式（继承和非继承的都清空），非常适合“清空”样式再重新设计。

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

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

相关文章

YOLOv8 实战指南：如何实现视频区域内的目标统计与计数

YOLOv8 实战指南：如何实现视频区域内的目标统计与计数

文章目录 YOLOv8改进 | 进阶实战篇&#xff1a;利用YOLOv8进行视频划定区域目标统计计数1. 引言2. YOLOv8基础回顾2.1 YOLOv8架构概述2.2 YOLOv8的安装与基本使用 3. 视频划定区域目标统计的实现3.1 核心思路3.2 完整实现代码 4. 代码深度解析4.1 关键组件分析4.2 性能优化技巧…
阅读更多...
matlab实现VMD去噪、SVD去噪，源代码详解

matlab实现VMD去噪、SVD去噪，源代码详解

为了更好的利用MATLAB自带的vmd、svd函数&#xff0c;本期作者将详细讲解一下MATLAB自带的这两个分解函数如何使用&#xff0c;以及如何画漂亮的模态分解图。 VMD函数用法详解 首先给出官方vmd函数的调用格式。 [imf,residual,info] vmd(x) 函数的输入&#xff1a; 这里的x是待…
阅读更多...
SQLite软件架构与实现源代码浅析

SQLite软件架构与实现源代码浅析

概述 SQLite 是一个用 C 语言编写的库&#xff0c;它成功打造出了一款小型、快速、独立、具备高可靠性且功能完备的 SQL 数据库引擎。本文档将为您简要介绍其架构、关键组件及其协同运作模式。 SQLite 显著特点之一是无服务器架构。不同于常规数据库&#xff0c;它并非以单独进…
阅读更多...
JAVA实战开源项目：精简博客系统 (Vue+SpringBoot) 附源码

JAVA实战开源项目：精简博客系统 (Vue+SpringBoot) 附源码

本文项目编号 T 215 &#xff0c;文末自助获取源码 \color{red}{T215&#xff0c;文末自助获取源码} T215&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…
阅读更多...
通过openpyxl在excel中插入散点图

通过openpyxl在excel中插入散点图

实现代码 # -*- coding: utf-8 -*- """ Created on Sat May 31 23:30:12 2025author: anyone """from openpyxl import load_workbook from openpyxl.chart import ScatterChart, Reference, Series from openpyxl.chart.series import SeriesL…
阅读更多...
基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具

基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具

文章目录 前言一、三维调窗原理二、自定义三维调窗工具三、调用流程1. 修改mprvr.js2. 修改DispalyerArea3D.vue3. view3d.vue4. Toolbar3D.vue 总结 前言 从cornerstoneTools BaseTool派生VolumeShiftColorTool&#xff0c;实现鼠标键按下并移动时&#xff0c;对3D窗口的pres…
阅读更多...
经典面试题：一文了解常见的缓存问题

经典面试题：一文了解常见的缓存问题

在面试过程中&#xff0c;面试官的桌子上摆放着很多高频的面试题&#xff0c;能否顺利回答决定了你面试通过的概率。其中缓存问题就是其中的一份&#xff0c;可以说掌握缓存问题及解决方法是面试前必须准备的内容。那么缓存有什么典型的问题&#xff0c;出现的原因是什么&#…
阅读更多...
GC1267F：单相全波风扇电机预驱动芯片解析

GC1267F：单相全波风扇电机预驱动芯片解析

在现代电子设备中&#xff0c;风扇电机的驱动控制是散热系统的关键组成部分。GC1267F 是一款由浙江新麦科技有限公司生产的单相全波风扇电机预驱动芯片&#xff0c;适用于需要大风量和大电流的服务器以及消费类电器风扇电机驱动。 芯片特性 GC1267F 支持外部 PWM 信号的变速功…
阅读更多...
Linux --进程状态

Linux --进程状态

目录 进程状态(宏观) Linux进程状态 进程状态的查看 进程状态(宏观) 为了了解Linux的进程状态&#xff0c;首先我们得了解进程状态&#xff0c;因为不仅仅是在Linux下有进程状态&#xff0c;macos和windows下都有进程状态&#xff0c;这里先解释的是一个宏观概念下的&#xff…
阅读更多...
智能手机上用Termux安装php+Nginx

智能手机上用Termux安装php+Nginx

Termux的官方网站&#xff1a;Termux | The main termux site and help pages. 以下是在 Termux 上安装和配置 PHP Nginx 的完整流程总结&#xff0c;包含关键步骤和命令&#xff1a; 一、安装依赖 pkg update && pkg upgrade # 更新包列表和系统pkg install nginx p…
阅读更多...
Visual Studio 调试中 PDB 与图像不匹配

Visual Studio 调试中 PDB 与图像不匹配

Visual Studio 调试中 PDB 与图像不匹配 在使用 Visual Studio 进行本地或远程调试时&#xff0c;很多开发者会遇到 PDB 加载失败、符号不匹配的问题&#xff0c;甚至程序进程未退出&#xff0c;导致 .exe 文件无法成功覆盖。本文详细解析了从后台进程清理、构建产物验证、模块…
阅读更多...
设计模式——策略设计模式（行为型）

设计模式——策略设计模式（行为型）

摘要 策略设计模式是一种行为型设计模式&#xff0c;它定义了一系列算法并将每个算法封装起来&#xff0c;使它们可以相互替换。该模式让算法的变化独立于使用算法的客户&#xff0c;从而使得算法可以灵活地切换和扩展。其主要角色包括策略接口、具体策略类和环境类。策略模式…
阅读更多...
保持本地 Git 项目副本与远程仓库完全同步

保持本地 Git 项目副本与远程仓库完全同步

核心目标&#xff1a; 保持本地 Git 项目副本与 GitHub 远程仓库完全同步。 关键方法&#xff1a; 定期执行 git pull 命令。 操作步骤&#xff1a; 进入项目目录&#xff1a; 在终端/命令行中&#xff0c;使用 cd 命令切换到你的项目文件夹。执行拉取命令&#xff1a; 运行…
阅读更多...
设计模式——模版方法设计模式（行为型）

设计模式——模版方法设计模式（行为型）

摘要 模版方法设计模式是一种行为型设计模式&#xff0c;定义了算法的步骤顺序和整体结构&#xff0c;将某些步骤的具体实现延迟到子类中。它通过抽象类定义模板方法&#xff0c;子类实现抽象步骤&#xff0c;实现代码复用和算法流程控制。该模式适用于有固定流程但部分步骤可…
阅读更多...
Deepin 20.9社区版安装Docker

Deepin 20.9社区版安装Docker

个人博客地址&#xff1a;Deepin 20.9社区版安装Docker | 一张假钞的真实世界 注意事项 Deepin 20.9 社区版安装 Docker 需要注意两点&#xff1a; 因为某些原因&#xff0c;Docker 官方源基本不可用&#xff0c;所以需要使用镜像源进行安装。当然也可以用安装包直接安装&am…
阅读更多...
纯数据挖掘也能发Microbiome？

纯数据挖掘也能发Microbiome？

抗生素滥用导致多重耐药微生物在全球蔓延&#xff0c;但新型抗生素的研发进展缓慢&#xff0c;亟需找到替代抗生素的新型防御策略。抗菌肽&#xff08;AMPs&#xff09;作为天然防御分子&#xff0c;具有低耐药潜力和广谱活性。德国小蠊&#xff08;Blattella germanica&#x…
阅读更多...
2025年05月30日Github流行趋势

2025年05月30日Github流行趋势

项目名称&#xff1a;agenticSeek 项目地址url&#xff1a;https://github.com/Fosowl/agenticSeek项目语言&#xff1a;Python历史star数&#xff1a;13040今日star数&#xff1a;1864项目维护者&#xff1a;Fosowl, steveh8758, klimentij, ganeshnikhil, apps/copilot-pull-…
阅读更多...
跨平台猫咪桌宠 BongoCat v0.4.0 绿色版

跨平台猫咪桌宠 BongoCat v0.4.0 绿色版

—————【下 载 地 址】——————— 【​本章下载一】&#xff1a;https://pan.xunlei.com/s/VORWH1a7lPhdwvon6DJgKvrNA1?pwdcw2h# 【​本章下载二】&#xff1a;https://pan.quark.cn/s/c3ac86f4e296 【百款黑科技】&#xff1a;https://ucnygalh6wle.feishu.cn/wiki/…
阅读更多...
Dify案例实战之智能体应用构建（一）

Dify案例实战之智能体应用构建（一）

一、部署dify Windows安装Docker部署dify&#xff0c;接入阿里云api-key进行rag测试-CSDN博客 可以参考我的前面文章&#xff0c;创建一个本地dify或者直接dify官网使用一样的&#xff08;dify官网需要科学上网&#xff09; 二、Dify案例实战之智能体 2.1 智能面试官 需求;…
阅读更多...
从模式到架构：Java 工厂模式的设计哲学与工程化实践

从模式到架构：Java 工厂模式的设计哲学与工程化实践

一、工厂模式概述 &#xff08;一&#xff09;定义与核心思想 工厂模式&#xff08;Factory Pattern&#xff09;是软件开发中常用的创建型设计模式&#xff0c;其核心思想是将对象的创建过程封装起来&#xff0c;通过工厂类来统一管理对象的创建逻辑。这种模式分离了对象的创…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023